iframe同域或异域下高度自动适应(兼容种浏览器)

最新推荐文章于 2019-08-02 15:52:42 发布

转载最新推荐文章于 2019-08-02 15:52:42 发布 · 1k 阅读

Flex + FMS 专栏收录该内容

176 篇文章

订阅专栏

本文介绍如何使用JavaScript实现IFrame的高度自动调整。针对同域和跨域两种情况提供了详细的解决方案，包括HTML和JavaScript代码示例。

利用javascript来控制iframe的高度自动适应，介于javascript对不同域名权限的限制，分为两种情况：

同域名情况下：

同域名下面，iframe自动适应高度，相对简单，下面代码兼容所有浏览器

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe自动适应高度</title>
<script type="text/javascript">
<!--//
function sizeFrame() {
    var F = document.getElementById("myFrame");
    if(F.contentDocument) {
        F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
    } else {
        F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
    }
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="http://www.a.com" scrolling="no" frameborder="0">同域情况</iframe>
</body>
</html>

异域情况下：

假设有一个main.html页面在服务器A上，有一个待载入的页面test.html在服务器B上。要想实现main.html利用iframe载入test.html，iframe高度要实现自动延伸，可利用一个中介页面z.html。

方法：

B服务器上的页面test.html利用隐藏iframe加载z.html，test.html页面计算自己的页面高度并赋值给z.html的hash即 z.html#height（计算出的高度）,z.html加载时，获取hash，并设置main.html中iframe的高度。废话不说了，直接看下面的代码吧

main.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--//
function sizeFrame() {
    var F = document.getElementById("iframeB");
    if(F.contentDocument) {
        F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
    } else {
        F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
    }
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe id="iframeB"  name="iframeB" src="http://www.b.com/test.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
</body>
</html>

test.html页面中需要加入的代码如下

 <iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight; //获取自身高度
    urlC = "http://www.a.com/z.html"; //设置iframeA的src
    document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>

中介页面z.html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function  pseth() {
    var iObj = parent.parent.document.getElementById('iframeB');//A和main同域，所以可以访问节点
    iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
    iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>
</head>
<body>
</body>
</html>