iframe自動適應高度跨域

回顧下在工做中遇到iframe跨域自動適應高度的解決方法，在網上有找了一個例子http://www.studyofnet.com/news/256.html 這裏提供一個Iframe代理的方法，

簡單地說一下原理:

假設有3個頁面，分別是主頁面A.html，字頁面B.html，代理頁面C.html;

其中A與B是跨域的，而A和C是同域的;

它們的關係：A包含B，B包含C。

很顯然A和B，以及B和C，由於跨域不能相互通訊，而A和C同域，能夠相互通訊。爲此咱們就想到讓C頁面告訴A頁面，B頁面到底有多少高。由於B和C也是跨域的不能相互通訊，因此想在C頁面中，直接window.parent.document.body.scrollHeight這樣是行不通的，因此咱們只能讓B頁面本身計算自身的高度，而後經過某種方法告訴C頁面，再由C頁面告訴A頁面。這裏的一個方法就是在B頁面生成一個Iframe節點，而後設置它的src屬性，在這個地址上附加一個參數，即B頁面計算出來的高度，而後C頁面就能夠經過window.location獲取這個地址欄中的地址，提取出高度值，設置A頁面的Iframe的高度。

基本的原理就是這樣，看代碼吧：

//A頁面
<iframe src="被引入的頁面B.html" id="Iframe" frameborder="0" scrolling="yes" width="1400"></iframe>

//B頁面腳本
//計算其實際高度，而後生成一個iframe節點，將高度做爲代理頁面C的地址的一部分賦值給Src屬性
<iframe id="c_iframe"  height="0" width="0" src="C頁面的路徑"></iframe>
    <script type="text/javascript">
    (function autoHeight(){
        var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
        var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
        var c_iframe = document.getElementById("c_iframe");
        c_iframe.src= c_iframe.src + '#'+b_width + '|' + b_height;
    })();
</script>

//C頁面腳本
//獲取請求地址中的高度值，將其賦值給A頁面的Iframe的高度
//新增頁面C.html與A.html同域
        <script type="text/javascript">
            var b_iframe = window.parent.parent.document.getElementById("Iframe");
            var hash_url = window.location.hash;
            
            if(hash_url.indexOf("#")>=0){
                var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
                var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
                b_iframe.style.width = hash_width;
                b_iframe.style.height = hash_height;
            }
    </script>