如何利用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 无提示关闭窗口脚本
Aug 17 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
微信小程序实现手势滑动效果
Aug 26 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
php的控制语句
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php 执行系统命令的方法
2009/07/07 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
ajax异步请求详解
2017/01/06 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python中的pack和unpack的使用
2018/03/12 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
简单了解Python write writelines区别
2020/02/27 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
8和9的加减法教学反思
2014/05/01 职场文书
通知格式
2015/04/27 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android