iFrame - iFrame中内容更改的自动高度 [英] iFrame - Auto Height on content change within 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将它的高度调整为iFrame的初始高度，但高度为在您完成预订流程时，iFrame会增加。有没有办法根据内容变化时内部的内容自动调整iFrame的高度？

The Javascript goes it adjusting the height to what the initial height of the iFrame is, but the height of the iFrame increases as you go through the booking process. Is there a way to auto adjust the height of the iFrame based on the content that lays inside it as the content changes?

注意： iFrame显示在与iFrame src相同的域中。

Note: The iFrame is displayed on the same domain as the iFrame src.

推荐答案

试试这个。不需要Jquery，但是当内容发生变化时你必须调用resizeIframe。

Try this. No Jquery needed, 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名称调用上述方法。

Here's an example iFrame and the necessary attributes in it. Be sure to call the above method with your iFrame name.

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

还有一个很好的JQuery插件可以完成任务，并且可以在域上工作：< a href =https://github.com/house9/jquery-iframe-auto-height =nofollow noreferrer> https://github.com/house9/jquery-iframe-auto-height

There's also a nice JQuery plugin that will accomplish the task, and supposedly works over domains as well: https://github.com/house9/jquery-iframe-auto-height

这篇关于iFrame - iFrame中内容更改的自动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！