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的回調！

 

代碼

首先在A.com中定義一個crossDomain.html

<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);
                    //這里是核心
document.getElementById('myfarme').src="http://172.16.34.128/hzyapp/crossDomain.html?"+location.search.substring(1)+conditions;  
                }
            }

這樣就可以順利在跨域的iframe中執行父頁面的js方法了，而且可以傳遞參數，對父頁面的相關元素可以任意操作了，對用戶來說是非常友好的。