Dynamic Advertising with HTML5 - HTML5 Advertising - page 290

</body>
<script type='text/javascript'>
var ad728 = document.getElementById('ad728'),
ad728value;

function adInit () {
console.log('adInit');
ad728.addEventListener('webkitTransitionEnd', nudge300, false);
}

function nudge300 (event) {
console.log(event);
ad728value = window.getComputedStyle(ad728,null).getPropertyValue('color');

if (ad728value === 'rgb(255, 255, 255)') {
if(typeof window.postMessage === 'undefined'){
console.error('Your browser does not support the communication API');
//fail over to our other method
} else {
//Same Domain
console.log('Message: ' + window.postMessage)
window.postMessage('play300', ' http://johnpercival.org ' );//Insert your
domain here
//Cross Domain
//document.getElementsByTagName('iframe')[0].contentWindow.
postMessage('play300', ' http://johnpercival.org ' );
}
} else {
//some other color
console.log(ad728value);
}
};

window.addEventListener('load', adInit, false);
</script>
</html>

First, you set up the 728 unit much like you did prior, but the main difference is you use a postMessage call that
takes two parameters. The first is the string value you want to pass, and the second is the domain for the window
object (in this case, my domain, but be sure to use the domain hosting the files), which is usually the ad server.

■ if you don't care much about the domain origin, you can pass a literal string value of * , which is the wildcard
and allows all domain transfers.

Note

Now, once the user hovers over the 728 unit, you post a message to anyone listening. In this case, it will be the
300 unit, as shown in Listing 11-16.