Resize IFrame From Source Page Using window.postMessage in Javascript

Some times you need to use iframes to display content from another page hosted on a different domain and you want to resize the iframe to match the size of the actual content hosted on the source page.

Lets say you have an iframe that looks like this:

1	<iframe id="frGrid" scrolling="auto" src="http://test.com/page.aspx" frameborder="0" style="border:0px; width:100%; height:700px"></iframe>

"http://test.com/page.aspx" is your source page. This page might be a grid that is dynamically generated from a database. This means you don't know how big the page will be. If you knew this information, you could set the height on the iframe to match the height of the source page.

So, what do you do when you don't know the size? What you do is you get the souce page height via javascript and pass it to the parent page where the iframe is hosted. You have to do this via the window.postMessage function in order to avoid the cross domain policy error that you normally get when accessing content hosted on another domain.

To do this, put the following javascript code in the same page where the iframe is located. Put it after the iframe is declared:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> function GetIFrameHeight() { var w = window; if (w.addEventListener) { w.addEventListener("message", SetHeight, false) } else if (w.attachEvent) { w.attachEvent("onmessage", SetHeight) } else { w.onMessage = SetHeight } } function SetHeight(e) { var f = document.getElementById('frGrid'); f.style.height = parseInt(e.data, 10) + 'px'; } GetIFrameHeight(); </script>

What this code is doing is setting up an event listener for the message that will be sent from the source page. All we have to do now is setup the following code on the source page (http://test.com/page.aspx) to send the message:

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript"> function SetIFrameHeight() { try { var b = document.body; window.parent.postMessage(b.offsetHeight, "*"); //* means all URLs. } catch (x) { } } setTimeout('SetIFrameHeight()', 50); </script>