HTML and CSS Reference
In-Depth Information
dispatch custom events from the 728 unit for the 300 unit to listen for and handle. If you are served through some
container (iframe or MRAID), you'll need to communicate through that container in order for the ads to connect. This
is a bit tricky considering that both ads will be wrapped at this point, and if it's run across an ad network, there's no
telling what the container would be, unless you had an ad loader script file whose sole job is to detect the environment
the ad is served into. If it's an iframe, you should be able to target the parent window, assuming you have access to
read-write values. If it's MRAID, you'll need to see whether there are certain MRAID or publisher calls to be made in
order to have the ads transfer data.
In addition, you may think that polling for a value isn't really an optimized technique. Well, it's not, and some
browsers will simply castrate the reoccurring interval calls after a certain amount of time. Luckily, there is another new
feature to HTML5, called the Communication API for Cross Document Messaging. It's perfect for synced ad development!
Communication API
The Communication API for Cross Document Messaging allows for transfer through the window object regardless
of domain securities and if content is wrapped in an iframe on the publisher page. Basically, if you want to dispatch
a message to another ad, saying “Hey, 300 unit, it's the 728 unit telling you to animate!” then you could have the
publisher's page or other elements on the page (hosted from a different domain) listen for the message and react
accordingly. This is done by using a method called
postMessage
; Listing 11-15 shows the revised synced ad example.
Listing 11-15.
Communication API 728 Example
<!DOCTYPE HTML>
<html lang=en>
<head>
<style type='text/css'>
#ad728 {
position: absolute;
top: 0px;
left: 0px;
width: 728px;
height: 90px;
border: 1px solid #000;
font-family: Arial;
font-size: 80px;
background-color: red;
color: rgb(0, 0, 0);
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}
#ad728:hover {
color: rgb(255, 255, 255);
}
</style>
</head>
<body align=center>
<div id='ad728'>728x90</div>
