Skip to content

Instantly share code, notes, and snippets.

@RobertBrewitz

RobertBrewitz/Iframe_Ad_Resizing

Created September 20, 2012 13:43
Show Gist options
  • Save RobertBrewitz/3756008 to your computer and use it in GitHub Desktop.
Save RobertBrewitz/3756008 to your computer and use it in GitHub Desktop.
Download ZIP
Cross site iframe resizing for adserving
Raw
Iframe_Ad_Resizing
<!-- HTML/JS on adhost page -->
<body style="margin:0;padding:0;">
<!-- render ad -->
<script type="text/javascript">
sendAdSize = function(e) {
if (e.origin == "http://publisher.com") {
if(e.data == 'adSize?') {
var adWidth = document.getElementsByTagName("img")[0].width;
var adHeight = document.getElementsByTagName("img")[0].height;
e.source.postMessage(adWidth+'x'+adHeight, e.origin);
}
}
}
window.addEventListener('message', sendAdSize, false);
</script>
</body>
<!-- HTML/JS on publishing page -->
<div id="ad"></div>
<script type="text/javascript">
var zone = "<zone identifier>";
var iframe = document.createElement("iframe");
iframe.src = "http://adserver.com/?zid="+zone+"&format=iframe";
iframe.id = zone;
iframe.frameBorder = 0;
iframe.scrolling = "no";
// Where the iframe should be placed
element = document.createElement("center");
document.getElementById("ad").appendChild(element);
element.appendChild(iframe);
// Set up postMessage for resizing iframe
iframe.onload = function() {
iframe.contentWindow.postMessage("adSize?", "http://adserver.com");
}
iframeResize = function(e) {
if (e.origin === "http://adserver.com") {
iframe.width = e.data.split("x")[0];
iframe.height = e.data.split("x")[1];
}
}
window.addEventListener("message", iframeResize, false);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment