如何利用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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
javascript中数组方法汇总
Jul 07 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
vue实现节点增删改功能
Sep 26 Javascript
react基本安装与测试示例
Apr 27 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
js命名空间写法示例
2015/12/18 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python画双y轴图像的示例代码
2019/07/07 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
你对IPv6了解程度
2016/02/09 面试题
乡镇个人对照检查材料
2014/08/22 职场文书
安全先进个人材料
2014/12/29 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang