Automatic height of Inline Frame

Il have to display in an Inline frame a webpage whose height is unknown (dynamic).
How can I adjust the Inline frame height for that ?


You can add some javascript (this does not require an Axure plugin) to the OnPageLoad handler of each page that will display in the iFrame. Note that the code assumes that the iframe is called “myIframe” (with a capital “I”), which you can change in the “$axFrame=” line in the code (be sure to leave the @). Add javascript by placing it where the URL goes in the Open Link in Current Window command.


    /* get a jQuery reference to the document (that appears in the iframe) */
   var $document = $(document);

    /* get an axQuery reference to the iframe */
   var $axFrame=window.parent.$axure('@myIframe');

    /* size the iframe to 0,0 - this is a necessary hack; if you have an OnResize interaction for the iframe, you should conditionally exclude the 0,0 size case  */
   $axFrame.resize({width:0 , height:0},{});

    /* resize the iframe to the width and height of the document */
   $axFrame.resize({width:$document.width() , height:$document.height()},{});

Live sample

File: autosize_iframe.rp (83.9 KB)

Oh, by the way, this post has a bunch of examples for communicating into and out of an iframe.

1 Like

It is possible to make it work with external url site? Of course I can change code on this external website.