Question

我有一个帮助页面，help.php，我在main.php中的iframe中加载如果在iframe中加载了该页面的高度，该怎么办？

我问这个是因为我无法将iframe的高度设置为100％或auto。这就是为什么我认为我需要使用javascript .. 我正在使用jQuery

CSS：

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS：

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML：

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

Answer 1

好的，我终于找到了一个很好的解决方案：

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

由于某些浏览器（较旧的Safari和Opera）在CSS渲染之前报告onload已完成，因此您需要设置微超时并将其删除并重新分配iframe的src。

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

Answer 2

不太复杂的答案是使用.contents()来获取iframe。有趣的是，我相信，由于身体上的填充，它返回的值与我在原始答案中使用代码的值不同。

$('iframe').contents().height() + 'is the height'

这就是我为跨域通信所做的工作，所以我担心它可能会不必要地复杂化。首先，我将jQuery放在iFrame的文档中;这将消耗更多内存，但它不应该增加加载时间，因为脚本只需要加载一次。

使用iFrame的jQuery尽可能早地测量iframe体的高度（onDOMReady），然后将URL哈希值设置为该高度。在父文档中，向iFrame标记添加onload事件，该标记将查看iframe的位置并提取您需要的值。因为onDOMReady将始终发生在文档的加载事件之前，所以您可以相当确定该值将正确传达，而不会出现竞争条件使事情复杂化。

换句话说：

...在Help.php中：

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

...并在父文档中：

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Answer 3

我发现以下内容适用于Chrome，Firefox和IE11：

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

当Iframes内容完成加载后，该事件将触发，并将IFrames高度设置为其内容的高度。这仅适用于与IFrame相同的域内的网页。

Answer 4

iframe中不需要jquery来执行此操作，但我使用它会导致代码更简单...

将其放入iframe内的文档中。

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

在上面添加了五个以消除小窗口上的滚动条，它在尺寸上永远不会完美。

这是在您的父文档中。

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

Answer 5

现在没有jQuery的代码是微不足道的：

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

解开活动：

frame.removeEventListener('load', syncHeight)

Answer 6

这是对我有用的正确答案

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });

Answer 7

简单的一线从默认的最小高度开始，然后增加到内容大小。

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Answer 8

接受的答案$('iframe').load现在会产生a.indexOf is not a function错误。可以更新为：

$('iframe').on('load', function() {
  // ...
});

自jQuery 1.8以来，很少有其他类似于.load的人被弃用："Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

Answer 9

这是一个jQuery免费解决方案，可以在iframe中与SPA一起使用

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

Answer 10

这是我对ES6友好的非jQuery用法

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});

jquery在加载时获取iframe内容的高度

10 个答案: