funct...">
Geek Answers Handbook

IFrame - Auto height when changing content in iFrame

I have the following code: -

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<div class="resizable">
    <iframe src="http://yellow-taxi.co.uk/onlinebooking/index.php" frameborder="0" width="100%" height="100%" scrolling="no" onload="resizeIframe(this)"></iframe>
</div>

Javascript adjusts the height to the initial height of the iFrame, but the height of the iFrame increases as you go through the booking process. Is there a way to automatically adjust the height of the iFrame based on the content that is inside it as the content changes?

Note. The iFrame is displayed in the same domain as the iFrame src.

+4
source share
2 answers

Try it. There is no jQuery, but you will have to call resizeIframe when the content changes.

function resizeIframe(obj) {
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight = document.getElementById(obj).contentWindow.document .body.scrollHeight;
        newwidth = document.getElementById(obj).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(obj).height = (newheight) + "px";
    document.getElementById(obj).width = (newwidth) + "px";
}

iFrame . iFrame.

<iframe src="yourpage.htm" width="100%" height="300px" id="yourIframe" marginheight="0" frameborder="0" onLoad="resizeIframe('yourIframe');"></iframe>

JQuery, , , : https://github.com/house9/jquery-iframe-auto-height

+2

, , , iframe. - , , , JS, DOM iframe.

SO

0

More articles:


All Articles