如何利用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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
js上传图片预览的实现方法
May 09 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
You might like
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
开会迟到检讨书
2014/01/08 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Redis实现一个账号只能登录一个设备
2022/04/19 Redis