使iframe自动调整高度根据内容而不使用滚动条?

例如:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

我希望它能够根据里面的内容来调整它的高度，而不使用滚动。

当前回答

您可以使用这个库，它既能正确地调整iframe的初始大小，也能通过检测iframe内容的大小变化(通过setInterval中的常规检查或通过MutationObserver)并调整它来保持它在正确的大小。

https://github.com/davidjbradshaw/iframe-resizer

他们也是一个React版本。

https://github.com/davidjbradshaw/iframe-resizer-react

这适用于交叉和相同域的iframe。

2014-02-02 20:52:36

其他回答

hjpotter92的建议在safari中不起作用! 我对脚本做了一个小的调整，所以它现在也可以在Safari中工作。

唯一的改变是在每次加载时将高度重置为0，以使某些浏览器能够降低高度。

将这个添加到<head>标签:

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

并将以下onload属性添加到iframe，如下所示

<iframe onload='resizeIframe(this)'></iframe>

2013-12-21 18:30:49

https://github.com/davidjbradshaw/iframe-resizer

他们也是一个React版本。

https://github.com/davidjbradshaw/iframe-resizer-react

这适用于交叉和相同域的iframe。

2014-02-02 20:52:36

hjpotter92的答案在某些情况下足够好，但我发现iframe内容经常在Firefox和IE中被底部剪辑，而在Chrome中很好。

以下工作很好为我和修复剪辑问题。该代码可以在http://www.dyn-web.com/tutorials/iframes/height/上找到。我做了轻微的修改，将onload属性从HTML中删除。把下面的代码放在<iframe> HTML后面和</body>结束标记之前:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

你的iframe HTML:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

请注意，如果您更喜欢在文档的<head>中包含Javascript，那么您可以恢复到在iframe HTML中使用内联onload属性，就像在dyn-web web页面中一样。

2015-07-04 11:01:33

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

这是不工作的chrome。但是在firefox上工作。

2014-10-05 14:59:16

在IE11上试试这个

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>

2015-12-09 22:09:27

使iframe自动调整高度根据内容而不使用滚动条?

推荐文章

最新文章

标签