跨域情況下Iframe高度自適應解決方案

原創

2020-02-20 14:38

相信很多人的遇到過跨域情況下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>
    
    <STYLE>iframe{behavior:expression(function(element){window.navigator.registerFrame(element.name, element);}(this))}</STYLE>
</head>

<body>

</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