如何利用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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 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
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
vue mounted组件的使用
2018/06/18 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
python多重继承新算法C3介绍
2014/09/28 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python应用文件读取与登录注册功能
2019/09/23 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
软件测试工程师面试问题精选
2016/10/28 面试题
学生拾金不昧表扬信
2014/01/21 职场文书
岗位廉政承诺书
2014/03/27 职场文书
学生党员公开承诺书
2014/05/28 职场文书
广播体操口号
2014/06/18 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
介绍信如何写
2015/01/31 职场文书
导游词开场白
2015/01/31 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python