How to auto-size an iFrame? [duplicate]

2019-01-04 17:48发布

站内问答 / JavaScript
1282 12 4

Possible Duplicate:
Resizing an iframe based on content

I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.

To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.

12条回答
可以哭但决不认输i
3楼-- · 2019-01-04 18:27

My solution, (using jquery):

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>  
<script type="text/javascript">
    $(function () {

        $('.tabFrame').load(function () {
            var iframeContentWindow = this.contentWindow;
            var height = iframeContentWindow.$(document).height();
            this.style.height = height + 'px';
        });
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-01-04 18:29

In IE 5.5+, you can use the contentWindow property:

iframe.height = iframe.contentWindow.document.scrollHeight;

In Netscape 6 (assuming firefox as well), contentDocument property:

iframe.height = iframe.contentDocument.scrollHeight
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
5楼-- · 2019-01-04 18:32

This solution worked best for me. It uses jQuery and the iframe's ".load" event.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
6楼-- · 2019-01-04 18:32

Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:

Note: there's a bit of jquery ahead:


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
7楼-- · 2019-01-04 18:34

This is the easiest method i have found using prototype:

Main.html:

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html:

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

This seems to work (so far) in all the major browsers.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)