1. 程式人生 > >iframe跨域通訊

iframe跨域通訊

簡述:

window.postMessage方法,允許跨視窗通訊,不論這兩個視窗是否同源。
視窗都可以通過message事件,監聽對方的訊息。

語法:
otherWindow.postMessage(message, targetOrigin, [transfer]);

message:傳送的內容。

targetOrgin:目標地址。

舉例:
父視窗http://www.test1.com向子視窗http://www.test2.com發訊息,
呼叫postMessage方法,寫法如下:

//父視窗傳送
var children = window.open('http://www.test1.com', '子視窗');
children.postMessage('我是父視窗', 'http://www.test2.com');

//子視窗監聽
window.addEventListener('message',function(e){
    console.log(e);
    if(e.origin !== 'http://www.test2.com') return;
},false);