如何利用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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
js获取class的所有元素
Mar 28 Javascript
javascript的内存管理详解
Aug 07 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
JS 表单验证大全
2011/11/23 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
python图像和办公文档处理总结
2019/05/28 Python
python 字典访问的三种方法小结
2019/12/05 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python开发入门——列表生成式
2020/09/03 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
竞争上岗演讲稿
2014/01/05 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
岗位竞聘书范文
2014/03/31 职场文书
民主评议党员个人总结
2015/02/13 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
社区宣传标语口号
2015/12/26 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android