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的高度。

正在加载的页面，都有800px +高度。

感谢。

Answer 1

iframe的高度不受内容的影响。这就是iframe的工作方式。如果您需要缩小或增长它们，则需要手动执行此操作。在这里阅读更多内容：

Answer 2

你试过JQuery吗？

您可以使用：

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

只要在想要iframe调整大小的任何事件上调用它。我已经为自己的一个项目开发了keyup。这是jsFiddle。

Answer 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

iframe没有调整到内容高度

3 个答案: