There are times when we have multiple iframes on a page and all of them need to access/modify some data/information on the parent page, while also needing the change to happen as soon as the page load without any delay, for an ad serving platform being able to achieve this is one of the primary requirements.

What Is An IFrame?

IFarme(Inline-Frame) is quite literally a frame embedded onto a web page which can load an HTML dom inside it. Iframes are embedded via the use of iframe tags which needs a source(src) as a parameter, the source is the link to the document that needs to be rendered inside the iframe. It also takes other parameters which are mostly related to positioning and presentation of the iframe, HTML5 brought few more parameters which allow us to add some restrictions to the frame like whether to allow forms, popups etc.

We use iframe to render ads, we provide clients with 2 types of tags i.e iframe and javascript, we also support both static images and HTML5 ads, the image ads are simple as they are an iframe with src to render an image along with other pixels that we use for tracking the performance of the ad, in case of a script tag the src of the script is to render the image directly onto the parent where the script tag was inserted. Things are different in the case of an html5 ad, an HTML5 ad is a web page(HTML document) and hence needs to always be inside an iframe, when a user inserts an iframe tag to render an HTML5 ad we render an iframe inside our original iframe with the source being the HTML doc provided by the user, when the user uses a javascript tag we render the ad’s iframe via JS functions.

Need Of IFrame Communcation

The HTML5 ads(creatives) that a user upload is usually created by third party creative agencies, these agencies design the creatives such that when the creatives are clicked they redirect to the landing page Url, these redirections are whoever the links are put into a globally available variable and is reused, the code for the redirection usually looks something like this

var clickTag = "http://sample.com";
window["clickTag"] = clicktag;
//later in code
$("clickArea").on("click",function(){
    window.href = window["clickTag"]
});

Our users take these creative and upload it as it is to our AdServer for rendering, but the process doesn’t end here we also need to trigger our tracking pixels before we redirect to the landing page, we do not want edit the creative itself to replace the landing page URL with our tracker pixel, as the same creative can be used in multiple placements/campaigns. a

How To Get Iframes To Communicate

There are quite a few alternatives to how an parent frame’s information can be shared with its child, the easier way would be to assign a new key with the tracking URL in the window’s object of the parent, and the child will be able to access the parent object by using parent.windows.

code in parent iframe

window[trackingURL] = trackingURL + landing_URL_of_ad;

code in child window(window in upladed ad is rendered)

window[trackingURL] = parent.window[trackingURL];

however this approach is only viable if we are rendering only one ad per page, but that is not always the case, so we need a way to make the window of parent to be able to provide every child frame with its own tracking pixel, to overcome this issue we the message event of javascript, this event allows a frame to send and get information from other frames, we write code for the message event for both receiving and sending message. Let us look how the code would look like for such and event.

code in parent iFrame

window.addEventListner(messageEvent, function(e) {
   e.source.postMessage(trackingUrl)
}}
}, false);

code in child iFrame

window.addEventListner(messageEvent, function(e) {
   window[trackingUrl] = e.data;
}}
}, false);
parent.postMessage();

Let me explain the code above, in the parent’s frame we write the code for listening to the message event, when we recive a message event we send the tracking URL to whoeveer had asked for it, the code in the child ifrme is same for every ad, this code is injected into every HTML creative as soon as they are uploaded, this is a generic code in which the child sends a message to its parent, when the parent receives this message it sends the stored tracking URL of the ad to the child who sent the message. The issues is tackled a little differently in the case of JS tags, as we render the ad iframe directly onto the publishers page the parent of all ads’ iframe is one, here we add a uniquely created parameter as query string in the ad’s source, then on the parent’s code we reply back the tracking URL when the unique code matches.

code in parent iframe

window.addEventListner(messageEvent, function(e) {
   if (e.data.origin.includes('rnd='+dxRnd)) {
      e.source.postMessage(trackingUrl);
      }
}}
}, false);

The code in child frame does not changes hence maintaining its reusability and genericness of the code. This communication between frame allows us to access data/information in a parent page from the iframes.