如何利用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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python利用IPython提高开发效率
2016/08/10 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
捐款倡议书
2014/04/14 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
初二数学教学反思
2016/02/17 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫