Js動態獲取iframe子頁面的高度總結

問題的緣由

產品有個評論列表引用的是個iframe，高度不固定於是引發這個總結。

方法1：父級頁面獲取子級頁面的高度 給元素設置高度

這方法是用在父級頁面里的，通過獲取子級頁面的高度給iframe設置高度

涉及了一些兼容問題:

IE用attachEvent | 3C用onload來判斷子頁面是否加載完成。

IE用contentWindow | 3C用contentDocument來獲取子頁面

IE用document.documentElement.scrollHeight（兼容ie6 ie7）| 3C用body.scrollHeight獲取頁面高度

function setIframeHeight(id){
    try{
        var iframe = document.getElementById(id);
        if(iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
            });
            return;
        }else{
            iframe.onload = function(){
                iframe.height = iframe.contentDocument.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setIframeHeight Error');
    }
}

 

方法2：子級頁面給父級頁面元素設置高度

這方法是用在子級頁面里的，通過獲取子級頁面的高度給父級iframe設置高度

子級頁面通過parent獲取父級iframe 給iframe設置高度，兼容同方法1。

缺點是刷父級頁面時iframe有緩存，需求清理緩存才能生效。

function setParentIframeHeight(id){
    try{
        var parentIframe = parent.document.getElementById(id);
         if(window.attachEvent){
            window.attachEvent("onload", function(){
                parentIframe.height = document.documentElement.scrollHeight;
            });
            return;
        }else{
            window.onload = function(){
                parentIframe.height = document.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setParentIframeHeight Error');
    }
}

 

 

需要注意的跨域操作

如果兩個頁面有一種情況，兩個子域名：

aaa.xxx.com
bbb.xxx.com

需要將兩個頁面都設置如：

document.domain ="xgo.com.cn";

這樣這兩個頁面就可以互相操作了。也就是實現了同一基礎域名之間的"跨域"。

利用document.domain實現跨域：
前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，端口都要一致，否則無法利用document.domain進行跨域

Javascript出於對安全性的考慮，而禁止兩個或者多個不同域的頁面進行互相操作。
相同域的頁面在相互操作的時候不會有任何問題。