How to make iFrame resize based on dynamic content each time the content height changes?

Is there any way of making the iframe change its height after the content inside changes?


I’m using easyXDM

Page code:

<script type="text/javascript" src=""></script> <div id="page-body"> <!-- do not define an iframe, it will get generated for you in this container --> </div> <script type="text/javascript"> new easyXDM.Socket({ remote: "", container: document.getElementById("page-body"), onMessage: function(message, origin){ this.container.getElementsByTagName("iframe")[0].style.height = message + "px"; this.container.getElementsByTagName("iframe")[0].style.width = "900px"; } }); </script>

iFramed page:

<script type="text/javascript" src=""></script> <script type="text/javascript"> var socket = new easyXDM.Socket({ onReady: function() { // this is needed for setting height on initial load socket.postMessage(document.body.scrollHeight) }, onMessage: function(message, origin){ // this is called from consumer (maybe by a timer) socket.postMessage(document.body.scrollHeight) } }); </script>


One Response to How to make iFrame resize based on dynamic content each time the content height changes?

  1. Guyher says:

    I propose another way to achieve it and hope it helpful. It is easy to implement

    – No need to modify the web page at other server to be used in your iframe.
    – Only need to add some javascript to your web page

    The key points of the proposed method are:
    – Obtain the HTML code of the web page to be used in your iframe via Yahoo’s YQL
    – Create an with attribute src of empty
    – Modify the obtained HTML code by adding ‘base’ tag and adding any javascript you want, e.g. for adjusting iframe’s height
    – Set the iframe’s content to be the modified HTML code.

    Typically, this will have the same content/appearance as the web page at the other server. And more importantly, this is not a cross-domain one, so your script can access anything within the iframe.

    For the details, on-line demo, and sample code, please refer to here

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.