JS跨域解決iframe高度自適應（IE8/Firefox/Chrome適用）

時間 2019-11-10

標籤解決 iframe 高度自適應 ie8 firefox chrome 適用欄目 JavaScript 简体版

原文原文鏈接

參考園友的js跨越實現，有提到三種方式：javascript

1. 中間頁代理方式,利用iframe的location.hashhtml

參見：http://www.5icool.org/a/201203/a1129.htmljava

2.window.postMessage實現方式跨域

參見：http://blog.csdn.net/u012545279/article/details/16802489app

3.window.name實現方式dom

結合咱們自身項目及前人經驗改良了window.name實現跨域，並在IE八、Chrome和Firefox下測試經過。post

有三個頁面：測試

a.com/main.html：主頁面。
a.com/proxy.html：代理文件，通常是一個沒有任何內容的html文件，須要和應用頁面在同一域下。
b.com/data.html：應用頁面須要獲取數據的頁面，可稱爲數據頁面。(本例中咱們是獲取子頁面child的高度以進行高度自適應的調整).

1.main.htmlui

<!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>  
    <title>Inter Domain Data Test</title>
    <script type="text/javascript">  
    
    function domainData(url, fn){
        var state = 0, 
        iframe = document.createElement('iframe'),
        loadfn = function() {
            if (state === 1) {
                fn(iframe.contentWindow.name);  
                iframe.contentWindow.document.write('');  
                iframe.contentWindow.close();  
                document.body.removeChild(iframe);  
                iframe.src = '';  
                iframe = null;  
            } else if (state === 0) {
                state = 1;
                iframe.contentWindow.location = "http://a.com/proxy.html";    // 設置的代理文件
            }  
        };
        iframe.src = 'http://localhost/smsGateway/route/tochild.do';
        if (iframe.attachEvent) {
            iframe.attachEvent('onload', loadfn);
        } else {
            iframe.onload  = loadfn;
        }
        document.body.appendChild(iframe);
    }
    </script>  
</head>  
<body>  
  <iframe id="iframeChild" name="iframeChild" src="http://b.com/child.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
</body>  
    <script type="text/javascript">  
    domainData('http://b.com/child.html', function(data){
        var iObj = document.getElementById('iframeChild');
        iObj.style.height = data+"px";
        //alert("height: "+data);
    });  
    </script>  
</html>

2.child.htmlurl

<!DOCTYPE html>
<html>
<head>  
    <meta  http-equiv='Content-Type'  content='text/html;charset=UTF-8' />  
    <title>iframe child</title>  
</head>  
<body>
<h3>This is child page.</h3>
<iframe id="iframeProxy" name="iframeProxy" src="" width="0" height="0" style="display:none;" ></iframe>
    <table border="1" width="600" style="height: 800px; background-color: yellow">
        <tr>
            <td><h3>iframe for auto height testing</h3></td>
        </tr>
    </table>
    <table border="1" width="200" style="height: 400px; background-color: blue">
        <tr>
            <td><h3>iframe for auto height testing</h3></td>
        </tr>
    </table>
</body>
    <script type="text/javascript">  
        window.name = document.documentElement.scrollHeight; //get iframe height 
    </script>
</html>