欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何利用js在两个html窗口间通信

程序员文章站 2022-04-03 18:33:22
场景:当a页面打开b页面,在b页面操作后,a页面需要同步变更数据时a 页面 ,http://127.0.0.1:10001/a.htmlvar domain = 'http://127.0.0.1:1...

场景:当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窗口间通信的资料请关注其它相关文章!