如何利用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系列(3) 全面解析Module模式
Jan 15 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
AngularJS指令用法详解
Nov 02 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
自我鉴定怎么写
2013/12/05 职场文书
班级活动策划书
2014/02/06 职场文书
出生公证书样本
2014/04/04 职场文书
10的分与合教学反思
2014/04/30 职场文书
鼓舞士气的口号
2014/06/16 职场文书
语文教研活动总结
2014/07/02 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
音乐剧猫观后感
2015/06/04 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android