跨域情况下Iframe高度自适应解决方案

相信很多人的遇到过跨域情况下Iframe高度自适应的问题,在百度和Google上找了很久,都没有找到合适的一解决方案,一次遇然机会,发现了window.navigator这个对象居然在能够在所有的Iframe中均可以访问的对象。下面是基于该对象的一个iframe跨域解决方案

对window.navigator这个对象进行扩展,可以将该js代码存在一个iframe.js文件,以后在父页面调用这个js即可

 

//声明一个数组用来保存所有的Iframe
window.navigator.Allframes=null;
window.navigator.Allframes=...{''$Top_Page$'':window};
//根据页面name属性查找到子页面所在Ifame对象
window.navigator.getFrameByName=function(oName)...{
    return this.Allframes[oName]
};
//将一个Iframe对象注册到window.navigator.Allframes数组中
window.navigator.registerFrame=function(oName,oElement)...{
    this.Allframes[oName]=oElement
};
//提供一个方法将一个子页面封装成一个对象
window.navigator.createFrame=function(childPage)...{   
    var fun=function()...{   
        this.objChildPage=childPage;
        this.getFrameByName=function(oName)...{
            return window.navigator.getFrameByName(oName)
        };
        this.resizeHeight=function()...{
            try...{
                var height=this.objChildPage.document.body.scrollHeight;
                if(this.objChildPage.name&&height)...{
                    var curIframe=window.navigator.getFrameByName(this.objChildPage.name);
                    curIframe.height=height;
                    return document.body.scrollHeight;
                }
            }catch(ex)...{
                //异常处理
            }
        }
    };
    return new fun
};
 
父页面parent.html,在http://parent.testdomain.com

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>父页面</title>
    <SCRIPT language="javascript" src="iframe.js" /></script>
    <!--通过CSS的方式为所有的Iframe注册,也可以通过javascript方式调用window.navigator.registerFrame注册指定的Iframe-->
    <STYLE>iframe{behavior:expression(function(element){window.navigator.registerFrame(element.name, element);}(this))}</STYLE>
</head>

<body>

    <iframe id="childPage" name="childPage" src="http://child.testdomain.com" width="100%" height="50px"  ></iframe>

</body>
</html>

 子页面(child.html)在http://child.testdomain.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>子页面</title>
    <SCRIPT LANGUAGE="JavaScript">
    //在body.onload中调用
    function AutoResizeHeight(){
      try{
          var control = window.navigator.createFrame(this);
          control.resizeHeight();
       }catch(ex){}
    }
    </script>
</head>

<body οnlοad="AutoResizeHeight()">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>

文章出处:http://www.diybl.com/course/1_web/webjs/2008515/116697.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值