iframe 未调整到内容高度答案

【问题标题】：iframe not resizing to content heightiframe 未调整到内容高度
【发布时间】：2013-02-09 21:00:08
【问题描述】：

我一直试图让它工作一段时间，但无济于事。我尝试了各种脚本，但我显然做错了什么:(

我在页面左侧有一个菜单，其中包含（相同的服务器）href 链接，其目标是页面右侧的 iframe。

它将页面发送到 iframe 很好，但 iframe 高度没有改变。

有人可以帮助我吗:(

这是我的代码：

html

<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

function sizeIframeToContent(id) {
    // resize iframe to be the height of the content
    try {
        var frame = document.getElementById(viewcontent);
        innerDoc = (frame.contentDocument) ?
                   frame.contentDocument : frame.contentWindow.document;
        var objToResize = (frame.style) ? frame.style : frame;
        objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
        //objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
    }
    catch (err) {
        console.log(err.message);
    }
}

....菜单链接

<div class="menuOut" onMouseOver="this.className='menuIn'" onMouseOut="this.className='menuOut'">
          <a href="forum_frame.php?forum=guest" target="viewcontent">- Forum Adverts </a></div>

.... iframe html

<div id=maincontain>
<iframe id="viewcontent" frameborder="0">
</iframe>
</div>

CSS

#maincontain {
    width: 85%;
    float: none;
    margin-left: 12%;
}
#viewcontent {
    width: 100%;
    padding-top: 15px;
    float: none;
}

除非我手动指定更大的高度，否则 iframe 只会保持大约 300 像素的高度。

正在加载的页面，都有 800 像素以上的高度。

谢谢。

【问题讨论】：

你能发一个 JSFiddle 吗？
... 为什么这个问题出现在 jquery 标签中？

标签： javascript html iframe

【解决方案1】：

iframe 的高度不受内容影响。这就是 iframe 的工作原理。如果您需要缩小或扩大它们，则需要手动进行。在这里阅读更多：

【讨论】：

那么实现我想做的最好的方法是什么？我只有 1 页 default.php，左侧有一个菜单，右侧有一个大 iframe。当我单击菜单中的链接时，它会将其发送到 iframe。我只希望 iframe 是我单击的页面的大小。 :\ 如果我很努力，最好的方法是什么？
@user1953045 第二个链接中的文章完全解释了您需要做什么，以及准备粘贴的代码。阅读时间为 10 分钟。
我完整地阅读了这篇文章。它与我今天阅读的许多其他人相似。我完全按照它，但它仍然无法正常工作。我显然做错了什么。老实说，我可能会放弃并寻找另一种方法。令人沮丧，因为它没有理由不工作。
好的，我在 iframe 标签中添加了一个 src=etc.xxx，当我刷新页面时，iframe 正在调整为源页面的大小。当我点击另一个链接时，它不会调整大小，
@user1953045 也许是因为你不能再依赖 iframe 的 load 处理程序。尝试在点击时使用所需的src 销毁并重新创建 iframe（不需要target，因为您将处理点击）。

【解决方案2】：

你试过 JQuery 吗？

你可以使用：

$("#viewcontent").height($("#viewcontent").contents().find("html").height());

只需在您希望 iframe 调整大小的任何事件上调用它。我已经为我自己的一个项目进行了 keyup 工作。这是jsFiddle。

【讨论】：

【解决方案3】：

请尝试以下脚本：

<script language="JavaScript">
<!--
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";
}
//-->
</script>

<iframe src="test.html" width="100%" height="200px" id="my_frame" marginheight="0" frameborder="0" onLoad="autoResize('my_frame');"></iframe>

你的域中应该有源文件。这已经讨论过了点击here

请为跨域 iframe 调整大小点击here

【讨论】：