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

2024-10-30 12:25:54

场景：当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 Window窗口对象属性和使用方法

一.Window对象概述 Window对象可以用来打开浏览器,调整浏览器的位置.大小等等功能. Window对象可以处理框架和框架之间的关系,通过这种关系在一个框架中处理另一个框架中的文档.他也是所有对象的顶级对象,通过Window对象的子对象进行操作,可以实现更多的效果. 1.Window对象属性每个对象都有自己的属性,顶级对象Window是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用. 下表列出了一些Window对象常用属性: 属性说明 docu
使用Ajax与服务器（JSON）通信实例

Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中创建出更好地打用户体验来. Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面.这两种方式都称不上是良好的用户体验. Ajax提供了两类服务器通信手段:同步通信和异步通信. 异步通信Ajax比同步通信要常见的多了,大概是9
Vue.js仿微信聊天窗口展示组件功能

源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍支持文本和图片的展示(后续将
JS简单实现父子窗口传值功能示例【未使用iframe框架】

本文实例讲述了JS简单实现父子窗口传值功能.分享给大家供大家参考,具体如下: 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>父窗口 </TITLE> <script language="javascript"> <!-- functio
javascript+html5+css3自定义弹出窗口效果

本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>自定义弹出窗口</title> <script type="text/javascript&qu
AngularJS ngModel实现指令与输入直接的数据通信

首先来看一下效果,在拖动input[range]的时候,下面的动画会随着拖动而发生改变,利用的原理就是ngModel实现的通信.实现的原理就是通过在指令中引入^ngModel来实现指令内部与外部之间的通信. 下面有几个点: 1.$formatters中push进去的函数实现modelValue转成valeuValue. 2.$render方法实现把viewValue中的值渲染到模板中. 3.$setViewValue实现的是更新模板中的viewValue值. 4.$parsers中push进去的
AngularJS通过$http和服务器通信详解

$http AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据. 在AngularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http. 1.$http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互. 2.$http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种m
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调
swing分割窗口控件JSplitPane使用方法详解

本文为大家分享了JSplitPane的使用方法,供大家参考,具体内容如下 1.swing分割窗口控件JSplitPane,用来将窗口分割成两个部分. 2.分割后的窗口每个窗口只能放一个控件,想要方多个控件的话,可以在上面方一个JPane面板,这样就可以方多个控件.swing分割窗口控件JSplitPane,用来将窗口分割成两个部分.JSplitPane提供两个常数让你设置到底是要垂直分割还是水平分割.这两个常数分别是:HORIZONTAL_SPIT,VERTICAL_SPLIT 3.使用方法:
JS检测window.open打开的窗口是否关闭

在开发中遇到需要在打开窗口的同时给父窗口添加遮罩防止用户误操作,而在窗口关闭时需要去掉父窗口的遮罩以便用户操作. 所以可以利用setInterval()来周期性的检测打开的窗口是否关闭. 如果检测到窗口已经关闭,则需要掉用clearInterval()终止监测行为. 1.创建一个新的窗口: var newWin = window.open(url,name,"height=500,width=1000"); $("body",parent.document).mas

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

相关推荐

随机推荐