如何利用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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
个人小程序接入支付解决方案
May 23 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
如何使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
php中计算程序运行时间的类代码
2012/11/03 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
基于python 字符编码的理解
2017/09/02 Python
python实现登录与注册系统
2020/11/30 Python
selenium自动化测试入门实战
2020/12/21 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
《恐龙》教学反思
2014/04/27 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
学校欢迎标语
2014/06/18 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
学生会辞职信
2015/03/02 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL