javascript - iframe 未调整到内容高度

Question

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

我在页面左侧有一个菜单，其中包含（同一服务器）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 只会保持大约 300px 的高度。

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

谢谢。

score 0 · Accepted Answer

你试过 jQuery 吗？

你可以使用：

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

请尝试以下脚本：

<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>

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

跨域 iframe 调整大小请点击这里

javascript - iframe 未调整到内容高度

3 回答 3

Related

Reference