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


Posted in Javascript onApril 27, 2021

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

Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
javascript new后的constructor属性
Aug 05 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jquery分割字符串的方法
Jun 24 Javascript
js创建数组的简单方法
Jul 27 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php简单统计中文个数的方法
2016/09/30 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python修改字典键(key)的方法
2019/08/05 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python中的全局变量如何理解
2020/06/04 Python
大专会计自我鉴定
2014/02/06 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
新生开学寄语大全
2015/05/28 职场文书
初中语文教学研修日志
2015/11/13 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
能让Python提速超40倍的神器Cython详解
2021/06/24 Python