如何利用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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Python学习资料
2007/02/08 Python
Python continue语句用法实例
2014/03/11 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python 中如何获取列表的索引
2019/07/02 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
大学生职业生涯规划书参考模板
2014/03/05 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
建筑投标担保书
2014/05/20 职场文书
任命书模板
2014/06/04 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
golang实现浏览器导出excel文件功能
2022/03/25 Golang