如何通过JavaScript实现两个HTML页面间的交互通信？

本文共计237个文字，预计阅读时间需要1分钟。

场景：当A页面打开B页面后，在B页面操作后，A页面需要同步更新数据时，可以在A页面增加以下代码：

javascriptA页面 +http://127.0.0.1:10001/A. +var domain='http://127.0.0.1:10001';window.open('http://127.0.0.1:10001/B.');window.addEventListener('message', function(event) { if (event.origin===domain) { // 接收B页面发送的数据 var data=event.data; // 更新A页面的数据 // ... }});

场景：当A页面打开B页面，在B页面操作后，A页面需要同步变更数据时

A 页面 ,127.0.0.1:10001/A.html

var domain = '127.0.0.1:10001'; window.open('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 页面 ,127.0.0.1:10001/B.html，opener是当前窗口的打开者引用

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

如果是需要A打开B的同时向B中发送数据时

// 发送数据方 var domain = '127.0.0.1:10001'; var myPopup = window.open('127.0.0.1:10001/B.html'); myPopup.postMessage('数据', domain); // 接收数据方 window.addEventListener('message', function(event) { if(event.origin !== '127.0.0.1:10001') return; console.log('message received: ' + event.data,event); },false);

以上就是如何利用js在两个html窗口间通信的详细内容，更多关于js在两个html窗口间通信的资料请关注自由互联其它相关文章！