如何利用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 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JavaScript类的继承操作实例总结
Dec 20 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue实现简单跑马灯效果
May 25 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
javascript学习之json入门
2016/12/22 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
如何表示python中的相对路径
2020/07/08 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python中的插入排序的简单用法
2021/01/19 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
中秋节超市促销方案
2014/01/30 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
颁奖典礼主持词
2014/03/25 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
销售求职信范文
2014/05/26 职场文书
诚信承诺书
2015/01/19 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python