如何利用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中发送数据时

// 发送数据方
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同源策略和CSRF
• JavaScript同源策略和跨域访问实例详解
• JS实现的ajax和同源策略(实例讲解)
• js同源策略详解
• JavaScript中EventBus实现对象之间通信
• 浅谈vue websocket nodeJS 进行实时通信踩到的坑
• Vue.js组件通信之自定义事件详解
• SpringBoot实现jsonp跨域通信的方法示例
• Vue.js子组件向父组件通信的方法实例代码详解
• 在vue中使用SockJS实现webSocket通信的过程
• JavaScript 如何实现同源通信

本文由 华域联盟 原创撰写：华域联盟 » 如何利用js在两个html窗口间通信

转载请保留出处和原文链接：https://www.cnhackhy.com/61373.htm