怎么利用js在兩個(gè)html窗口間通信

小編給大家分享一下怎么利用js在兩個(gè)html窗口間通信，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

場(chǎng)景：當(dāng)A頁(yè)面打開(kāi)B頁(yè)面，在B頁(yè)面操作后，A頁(yè)面需要同步變更數(shù)據(jù)時(shí)

A 頁(yè)面 ,http://127.0.0.1:10001/A.html

var domain = 'http://127.0.0.1:10001';

window.open('http://127.0.0.1:10001/B.html');
window.addEventListener('message', function (event) {
    if (event.origin !== domain) return;
    console.log('message received:  ' + event.data, event);
}, false);

B 頁(yè)面 ,http://127.0.0.1:10001/B.html，opener是當(dāng)前窗口的打開(kāi)者引用

var domain = 'http://127.0.0.1:10001';
window.opener.postMessage("success", domain);
window.close();

如果是需要A打開(kāi)B的同時(shí)向B中發(fā)送數(shù)據(jù)時(shí)

// 發(fā)送數(shù)據(jù)方
var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('數(shù)據(jù)', domain);

// 接收數(shù)據(jù)方
window.addEventListener('message', function(event) {
    if(event.origin !== 'http://127.0.0.1:10001') return;
    console.log('message received:  ' + event.data,event);
},false);

以上是“怎么利用js在兩個(gè)html窗口間通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！