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

例如:

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

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

当前回答

<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

其他回答

将此添加到<head>部分:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

把你的iframe改成这样:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

在现场讨论中发现。

2012-04-02 12:20:22

在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

function autoResize(id){
    var newheight;
    var newwidth;

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

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

把这个添加到你的iframe: onload = " autoResize (youriframeid)”

2014-01-15 19:49:45

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

<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

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

推荐文章

最新文章

标签