获取iframe里面内容高度实现高度自适应

发表于2014-05-29 09:12| 次阅读| 来源管理员| 作者管理员

摘要：iframe在我们开发后台页面的时候无处不在，但是iframe本身是不能随着他的内容的高度而改变的，所以我们需要用JS获取iframe里面的内容的高度来达到整体没有滚动条具体方法如下： ht

iframe在我们开发后台页面的时候无处不在，但是iframe本身是不能随着他的内容的高度而改变的，所以我们需要用JS获取iframe里面的内容的高度来达到整体没有滚动条

具体方法如下：

html

<iframe frameborder="0" src="welcome.html" width="100%" id="frameContent" marginheight="0" marginwidth="0" name="frameContent" height="100%" onload="javascript:resizeFrame()">

function resizeFrame(){
    var height = $('#frameContent').contents().find("#content").height() + 40;
    $('#frameContent').height(height < 500 ? 500 : height);
}

达到以上方法在IE 和 Firefox下测试通过。但是chrome以及chrome内核的浏览器会有点问题。

后来上网查了资料，发现如果你直接点开html，iframe里面的内容是绝对路径，chrome是不能读取iframe的内容的。这是chrome的安全性的考虑。

如果想读取iframe的内容，应该以http://的形式去读取。后来我把html文件放到服务器上去，用http://127.0.0.1/index/html形式去访问html文件，那么iframe里的文件路径就自动变成了

http://127.0.0.1/welcome.html，结果是chrome读取了iframe的内容，以上代码生效了。

这段代码我亲测有效，如果大家有问题欢迎留言我给大家解决