Post Messages Between Window & Iframe

Case

Create a “parent” site as a publisher, and put a 970*250 billboard ad on it. The ad placed in an iframe. It has hide and show button. Hide to collapse it to a smaller size, and show to expand it to original size.
When user press hide button, the ad will collapse to a smaller size, and there will be a white space between parent site’s contents and the ad. The expectation is when the ad collapsed, the contents of parent site will fill the white space.

Solution

We’re using an iframe, so we have to use Window.postMessage() from the ad to send a status message to parent site. Parent site will know whether user press a hide or a show button on the ad. If the parent site gets a collapse message, it will call a function to change the height of the iframe to a smaller size, and if it gets an expand message, it will call a function to change back the iframe size to its original size.

Demo

https://drive.google.com/file/d/1Hi-PtWYL7oJ1Hm6XrAm7t5qzQ1wAfmHH/view?usp=sharing

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s