如何利用js在兩個html窗口間通信
更新時間：2021年04月27日 14:56:16 作者：淺笑·
這篇文章主要介紹了如何利用js在兩個html窗口間通信，如果讀者們有類似的需求，可以參考下
場景：當A頁面打開B頁面，在B頁面操作后，A頁面需要同步變更數據時
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是當前窗口的打開者引用
var domain = 'http://127.0.0.1:10001';
window.opener.postMessage("success", domain);
window.close();
如果是需要A打開B的同時向B中發(fā)送數據時
// 發(fā)送數據方
var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('數據', domain);
// 接收數據方
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窗口間通信的詳細內容，更多關于js在兩個html窗口間通信的資料請關注腳本之家其它相關文章！
相關文章
JS中new?Date().Format("yyyy-MM-dd")?報錯的解決
這篇文章主要介紹了JS中new?Date().Format("yyyy-MM-dd")?報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下2007-12-12
JavaScript實現(xiàn)的文本框placeholder提示文字功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的文本框placeholder提示文字功能,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實現(xiàn)js文件的異步加載，避免網頁失去響應，第二管理模塊之間的依賴性，便于代碼的編寫和維護，對require.js用法感興趣的朋友可以參考下本篇文章2015-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標點擊頁面彈出自定義文字效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
在AJAX興起以前，很多人寫JS可以說都是毫無章法可言的，基本上是想到什么就寫什么，就是一個接一個的函數function，遇到重復的還得copy，如果一不小心函數重名了，還真不知道從何開始查找錯誤2010-08-08
這篇文章主要介紹了BootStrap selectpicker 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js判斷某個方法是否存在的實例代碼,可用于檢測js中的方法是否可用,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了javascript使用遞歸算法求兩個數字組合功能,結合實例形式分析了JS基于遞歸算法的數組遍歷、判斷、轉換等相關操作技巧,需要的朋友可以參考下2017-01-01
今天小編就為大家分享一篇在layui中select更改后生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09