如何利用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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python实现连接mongodb的方法
2015/05/08 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python交换两个变量的值方法
2019/01/12 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
查看keras的默认backend实现方式
2020/06/19 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
会计专业毕业自荐书范文
2014/02/08 职场文书
花坛标语大全
2014/06/30 职场文书
秋收起义观后感
2015/06/11 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python