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.
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
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
code in child window(window in upladed ad is rendered)
code in parent iFrame
code in child iFrame
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
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.