快捷導(dǎo)航

如何利用js在兩個html窗口間通信

更新時間：2021年04月27日 14:56:16 作者：淺笑·

這篇文章主要介紹了如何利用js在兩個html窗口間通信，如果讀者們有類似的需求，可以參考下

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

A 頁面 ,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 頁面 ,http://127.0.0.1:10001/B.html，opener是當(dāng)前窗口的打開者引用

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

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

// 發(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在兩個html窗口間通信的詳細(xì)內(nèi)容，更多關(guān)于js在兩個html窗口間通信的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JS中new?Date().Format("yyyy-MM-dd")?報錯的解決
這篇文章主要介紹了JS中new?Date().Format("yyyy-MM-dd")?報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
JS的replace方法與正則表達(dá)式結(jié)合應(yīng)用講解
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達(dá)式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下
2007-12-12
JavaScript實(shí)現(xiàn)的文本框placeholder提示文字功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的文本框placeholder提示文字功能,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-07-07
require.js的用法詳解
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護(hù)，對require.js用法感興趣的朋友可以參考下本篇文章
2015-10-10
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
在AJAX興起以前，很多人寫JS可以說都是毫無章法可言的，基本上是想到什么就寫什么，就是一個接一個的函數(shù)function，遇到重復(fù)的還得copy，如果一不小心函數(shù)重名了，還真不知道從何開始查找錯誤
2010-08-08