iframe中跨域頁面訪問parent的方法

iframe中跨域頁面訪問parent的方法：

跨域實例：

如上圖所示，系統www.a.com/index.html頁面中嵌入一個iframe，iframe中訪問不一樣域的www.b.com/index.html

而後b中有個按鈕「保存」，想調用父頁面a.com/index.html中的一個js方法saveFavorite()

問題：

iframe和父頁面若是是同一個域的，那問題很好辦，直接parent.saveFavorite()便可。

但問題難在是不一樣域，不一樣域是不容許相互訪問js代碼的。

解決方案：

跨域的問題，也有很多的解決方案（參考：http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx），這裏提供一種比較優雅的方案。

解決方案說明以下：
在AAA.com域名下的index.htm頁面中內嵌了BBB.com域名下的一個頁面index.htm，正常狀況下iframe內部的index.htm頁面是沒法訪問父頁面index.htm中的任何dom對象或者js函數的，由於跨域，但咱們常常又須要作一些參數回傳的事情怎麼辦呢？以上的這種實現方式就很好的解決了這個問題；

解決方案的關鍵優雅之處在於：瀏覽器雖然會禁止js跨域訪問頁面中的對象，但對於iframe的層級關係引用並無作限制，即parent仍然可用；該方案就是利用了2層內嵌iframe、使用第二級iframe中的頁面與parent.parent的頁面是同域名的關係，從而避免跨域問題實現兩個頁面間相關數據的傳遞，本質上就是利用parent.parent實現對父父頁面中js的回調！

代碼：

<script type="text/javascript">
    window.onload = function () {
        moduleId = getParam("moduleId");
        conditions = getParam("conditions");
//這是就是去執行頂層父頁面的js方法
        parent.parent.SaveFavorite(moduleId, "", "&conditions=" + conditions);
    }
    function getParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return (r[2]); return "";
    }
</script>

而後再B.com/Index.html中，在按鈕單擊事件中添加以下代碼：

//別忘記，在index.html中添加一個隱藏的iframe，固然你也能夠經過js動態建立
<iframe id="myfarme" src="#" style="display:none;"></iframe>

btnSaveApp: {
   tap: function () {
         win = this.getCdnWin();
                   
         cdt = win.getValues();
         conditions = "&conditions=" + Ext.encode(cdt);
         //這裏是核心,要讓該頁面隱藏的這個iframe和跨域的父頁面是同一個域
document.getElementById('myfarme').src="http://172.16.34.128/hzyapp/crossDomain.html?"+location.search.substring(1)+conditions; 
          }
}

這樣就能夠順利在跨域的iframe中執行父頁面的js方法了，並且能夠傳遞參數，對父頁面的相關元素能夠任意操做了，對用戶來講是很是友好的。