Month: January 2020

by

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.