Auto Resize IFRAME Cross Origin

Browser security policies prevent frames from interacting with each other if they are not from the same origin (like domain but even more specific).

However, frames can pass messages to each other.   Here is how you can implement cross-origin iframe auto-resizing based on window.postMessage.

Lets assume we have a parent page that looks like this:

<html>
  <head>
    <title>Parent Page</title>
  </head>
  <body>
     ...
     [iframe id="frame1" src="https://otherdomain.com/frame1.html"]
  </body>
</html>

(assume [] is <> above, sorry about over protective content escaping in wordpress.com)

To enable auto-resizing on this page, add some script to the end of the <head></head> section (or just before </body> if that is where you put them).

This listens for a “message” event and will check to see if it has an action of “resize”.  If so it will update the specified id’s height.

<script>
  window.addEventListener("message",function(e){
    if(e.data.action=='resize') {
      document.getElementById(e.data.id).style.height = e.data.height+'px';
    }
  },
  false
  );
</script>

On the embedded frame source, you need an onload event to send a message:

window.onload = function() { 
  window.parent.postMessage({action:'resize',id:'frame1',height:document.body.scrollHeight+20},'*');
};

Note that we need to pass “frame1” which is the ID of the frame on the parent page.

Then the frames should auto-size to their content.

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