如何利用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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
详解javascript遍历方式
Nov 11 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
根德YB400的电路分析
2021/03/02 无线电
PHP网站提速三大“软”招
2006/10/09 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
期末自我鉴定
2014/01/23 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
大学生村官入党自传
2015/06/26 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python