iframe跨端口報錯 Blocked a frame with origin from accessing a cross-origin frame

前言
    在不一樣的端口號，甚至是不一樣的ip進行iframe嵌套的時候，在父頁面調用子頁面的方法的時候，報錯

SecurityError: Blocked a frame with origin from accessing a cross-origin frame…

 

問題緣由
    在不一樣端口號下，不能使用傳統的iframe嵌套調用方法。

document.getElementById("mainFrame").contentWindow.xxxx()；

    由於

    同源安全策略
        你不能用javascript訪問一個<iframe>，若是你能作到這一點，那將是一個巨大的安全缺陷。對於同一源策略瀏覽器，阻止腳本嘗試訪問具備不一樣源的幀。

        若是地址中至少有一個部分未保留，則認爲來源不一樣：

<protocol>://<hostname>:<port>/path/to/page.html

 

    若是要訪問iframe，協議、主機名和端口必須與域相同。

Examples
    下面是嘗試訪問如下URL時將發生的狀況

        http://www.example.com/home/index.html

URL RESULT http://www.example.com/home/other.html -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80 -> Success (default port for HTTP) 
http://www.example.com:2251 -> Failure: different port 
http://data.example.com/dir/other.html -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21 -> Failure: different protocol & port 
https://google.com/search?q=james+bond -> Failure: different hostname & protocol

 

解決方法
    儘管同一源站策略阻止腳本訪問不一樣源站的內容，但若是您同時擁有這兩個頁面，則能夠使用window.postmessageand其相關消息事件在兩個頁面之間發送消息來解決此問題。

//在主頁面
var frame = document.getElementById('your-frame-id'); frame.contentWindow. postMessage (data, '*'); data能夠是string，boolean，number，array，object //在iframe子頁面
window. addEventListener ('message', function(event) { //event.data獲取傳過來的數據
});

 

注意：父頁面的postMessage是觸發addEventListener的