如何利用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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
jQuery 选择器理解
Mar 16 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Python读写锁实现实现代码解析
2020/11/28 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
高考励志标语
2014/06/05 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
给病人的慰问信
2015/03/23 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
国博复兴之路观后感
2015/06/02 职场文书
十七岁的单车观后感
2015/06/12 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫