iframe框架自適應高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

來源於crm項目的contact/edit.html

一、背景是這樣的

最近在做crm系統的前端頁面，有一個頁面呢，點擊“查看全部信息”時會彈出，這個彈窗里面又有分頁導航，分頁不是使用ajax 異步刷新請求寫的，而是通過刷新頁面。由於整站的分頁都是使用這個方法，所以不可能讓后端同事用ajax重寫一個分頁，所以呢，就想到使用iframe框架，把這個彈窗寫在html文件，放在iframe中完成。一切都是perfect的想法。

二、問題來了！解決問題

此時不僅僅是沒有高度自適應而且還報錯，其實這報的錯的是域為空，因為我沒有放在同一個域中來運行代碼。

解決方法是：把這些頁面都放在apache服務器下運行，也就是保證他們有域，且在同一個域中。

好的，現在就是代碼不報錯，我們此時只需要再用js獲取一下這個div的高度就好了。

/* 聯系人contact */
(function(){
    var contact = {
        reinitIframe:function(){
            var iframe = document.getElementById("iframe-div");
            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.height = height;
            }catch (ex){
            }
            // window.setInterval("reinitIframe()", 200); 函數調用挪到頁面中  
        }
    };
    window.contact = contact;
})()

 

我習慣把方法保存在一個對象中，這樣維護起來方便點。

現在獲取高度的方法寫好，接着就是在頁面中去調用這個方法。

 <script type="text/javascript" src="../../../resource/js/crm.js"></script>
    <script>
    // iframe 自適應高度  
    $(function(){
        window.setInterval("contact.reinitIframe()", 200);  
    });
    </script>

 

一切就緒，我們在本地服務器執行一下代碼。如圖1：

 

我們直接用瀏覽器打開，如圖2：

！！如果有人也是使用iframe嵌套進去的方法，頁面中的內容高度不再自適應了，此時計算div的高度的方法又是沒錯的，那么有可能就是沒有把頁面方法同一個域中去執行，所以的解決的方法就是可以放在服務器下去執行。如果你是使用瀏覽器直接打開，那么使用的可能是file協議，所以才會導致瀏覽器報錯，說域為空。下次出錯就試試放在服務器下去執行吧。可以直接下個wamp安裝包，把頁面代碼扔進來執行。

三、學習到的

1、報錯要善於從報錯信息找出問題所在。我一開始沒有想到是文件沒有在同一個域中的問題，一直以為是我js獲取內容高度出錯 ，所以一直在這個js函數中找錯誤，后來認真看了報錯信息，才知道原來是沒在同一個域中。打臉~

2、使用到了iframe去嵌套頁面，雖然網上各種批評iframe框架執行效率低之類，但是能解決問題的就是好的吧。