Uncaught DOMException: Blocked a frame with origin 跨域問題解決方法

最近寫的項目需在彈出層中調用其它系統的頁面，並獲取選中的內容，但是遇到Uncaught DOMException: Blocked a frame with origin "url" from accessing a cross-origin frame.這個問題。

使用postMessage()方法可以解決跨域傳值的問題，這裏貼上posetMessage的API

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

廢話不多說直接上代碼

我是使用的layer這個前臺框架，所以可能和使用window.open()這種方式打開的彈出層有點不同。

父頁面

layer.open({
    //layer彈出層成功打開後，發送消息給子頁面
    success: function (layero, index) {
      var data = $('[id*="id"]').val()
      //因爲是公司內網，所以url使用的*
      window[layero.find('iframe')[0]['name']].postMessage(data, '*');
     },
    //點擊頁面的確認按鈕後獲取子頁面的返回值
     yes: function (index, layero) {                       
        //發送一個'return'，表示子頁面需要返回值
        window[layero.find('iframe')[0]['name']].postMessage('return', '*')
        layer.close(index);
    }
});

//監聽子頁面的postMessage
function receiveMessage(event) {
     console.log(event.data)//取得子頁面傳回來的值
     $("#id").val(event.data)
 }
 window.addEventListener('message', receiveMessage, false);

這裏貼上一段關於Url參數的說明，各位使用的時候要注意一下安全問題

子頁面接收父頁面發送的值

window.addEventListener('message',function(e){    
    var value = e.data;
    //子頁面如果接收到的data的值是'return'，則調用返回方法向父頁面發送數據
    if (value != null && value == 'return')
        //返回數據
        returnSelectUser()
    else if (value != null && value.trim().length != 0) {
        //do something      
    }
}, false);

//向父頁面發送數據
function returnSelectUser() {
    var value = $("#id").text();
    console.log(value)
    parent.postMessage(value, "*");    
}