快捷導(dǎo)航

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

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

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

場(chǎng)景：當(dāng)A頁(yè)面打開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)前窗口的打開者引用

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

如果是需要A打開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窗口間通信的詳細(xì)內(nèi)容，更多關(guān)于js在兩個(gè)html窗口間通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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