iframe 跨域

今天網站有個奇葩需求，OA系統和統計數據是兩個站，統計數據在OA系統的iframe中打開，然後根據統計的量，要點開看明細，這些都是在數據層面處理出來的，然後又要明細上面能連接到OA系統的詳細頁上面去。當我正常操作，給了個錯：

Blocked a frame with origin "http://XXXX" from accessing a frame with origin "http://XXXX".Protocols, domains, and ports must match.

阻止來源爲“http://xxxx”的幀訪問來源爲“http://xxxx”的幀。協議、域和端口必須匹配。

意思就是協議、域名、端口不一致導致的，總的來說就跨域了，媽蛋。

 

其實解決方法很簡單，在OA站的iframe外面註冊一個事件

$(function () {
//註冊量化頁面彈出層
window.addEventListener('message', function (e) {
if (e.data[1] == "2")
MainshowIF("http://XXXXX?ID=" + e.data[0], 700, 500, '');//彈出
else
MainshowIF("http://XXXXX?id=" + e.data[0], 700, 500, '');//彈出
}, false);
})

 然後在點彈出層的頁面上加入方法

function Show(ID, Type) {
        //* 爲指定父級域名
        window.parent.postMessage([ID, Type], '*');
    }

調用這個方法就可以去執行父級的方法了。 

 [ID,Type] 對應前面e.data[0],e.data[1]，這個地方可以是各種類型，bool，int，Object

*可以指定域名，如果父級域名和指定的域名不一致，那麼就無法調用父級頁面的方法。

 

全js代碼，真好，靠譜！