脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js在两个html窗口间通信

如何利用js在两个html窗口间通信

 更新时间：2021年04月27日 14:56:16   作者：浅笑·  
这篇文章主要介绍了如何利用js在两个html窗口间通信，如果读者们有类似的需求，可以参考下

场景：当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窗口间通信的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS中new Date().Format("yyyy-MM-dd") 报错的解决

    JS中new Date().Format("yyyy-MM-dd") 报错的解决

    这篇文章主要介绍了JS中new Date().Format("yyyy-MM-dd") 报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • JS的replace方法与正则表达式结合应用讲解

    JS的replace方法与正则表达式结合应用讲解

    replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。为了帮助大家更好的理解，下面举个简单例子说明一下
    2007-12-12
  • JavaScript实现的文本框placeholder提示文字功能示例

    JavaScript实现的文本框placeholder提示文字功能示例

    这篇文章主要介绍了JavaScript实现的文本框placeholder提示文字功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • require.js的用法详解

    require.js的用法详解

    本文给大家介绍require.js的用法，require.js的诞生是为了解决两大问题，第一实现js文件的异步加载，避免网页失去响应，第二管理模块之间的依赖性，便于代码的编写和维护，对require.js用法感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • js实现鼠标点击页面弹出自定义文字效果

    js实现鼠标点击页面弹出自定义文字效果

    这篇文章主要为大家详细介绍了js实现鼠标点击页面弹出自定义文字效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS面向对象编程之对象使用分析

    JS面向对象编程之对象使用分析

    在AJAX兴起以前，很多人写JS可以说都是毫无章法可言的，基本上是想到什么就写什么，就是一个接一个的函数function，遇到重复的还得copy，如果一不小心函数重名了，还真不知道从何开始查找错误
    2010-08-08
  • BootStrap selectpicker

    BootStrap selectpicker

    这篇文章主要介绍了BootStrap selectpicker 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • js判断某个方法是否存在实例代码

    js判断某个方法是否存在实例代码

    这篇文章主要介绍了js判断某个方法是否存在的实例代码,可用于检测js中的方法是否可用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • javascript使用递归算法求两个数字组合功能示例

    javascript使用递归算法求两个数字组合功能示例

    这篇文章主要介绍了javascript使用递归算法求两个数字组合功能,结合实例形式分析了JS基于递归算法的数组遍历、判断、转换等相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • 在layui中select更改后生效的方法

    在layui中select更改后生效的方法

    今天小编就为大家分享一篇在layui中select更改后生效的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论