首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Window.open在从父窗口打开的两个同级窗口之间通信

,可以通过以下几种方式实现:

  1. 使用postMessage方法:postMessage是HTML5提供的一种跨窗口通信机制,可以在不同窗口之间安全地传递数据。在父窗口中,可以使用window.open打开两个同级窗口,并给每个窗口添加message事件监听器。然后,通过postMessage方法向目标窗口发送消息,目标窗口可以通过监听message事件来接收消息。具体代码如下:
代码语言:txt
复制
// 在父窗口中打开两个同级窗口
var window1 = window.open('window1.html', '_blank');
var window2 = window.open('window2.html', '_blank');

// 在窗口1中发送消息给窗口2
window1.postMessage('Hello from Window 1', '*');

// 在窗口2中监听message事件接收消息
window.addEventListener('message', function(event) {
  if (event.source === window1) {
    console.log('Message received from Window 1:', event.data);
  }
});
  1. 使用localStorage或sessionStorage:localStorage和sessionStorage是HTML5提供的本地存储机制,可以在不同窗口之间共享数据。在父窗口中,可以使用window.open打开两个同级窗口,并在每个窗口中使用localStorage或sessionStorage存储数据。然后,通过监听storage事件来接收数据的变化。具体代码如下:
代码语言:txt
复制
// 在父窗口中打开两个同级窗口
var window1 = window.open('window1.html', '_blank');
var window2 = window.open('window2.html', '_blank');

// 在窗口1中存储数据
localStorage.setItem('message', 'Hello from Window 1');

// 在窗口2中监听storage事件接收数据
window.addEventListener('storage', function(event) {
  if (event.key === 'message' && event.newValue) {
    console.log('Message received from Window 1:', event.newValue);
  }
});
  1. 使用共享Worker:共享Worker是HTML5提供的一种多线程机制,可以在不同窗口之间共享一个Worker线程,从而实现跨窗口通信。在父窗口中,可以使用window.open打开两个同级窗口,并在每个窗口中创建一个共享Worker。然后,通过postMessage方法向共享Worker发送消息,共享Worker可以通过监听message事件来接收消息。具体代码如下:
代码语言:txt
复制
// 在父窗口中打开两个同级窗口
var window1 = window.open('window1.html', '_blank');
var window2 = window.open('window2.html', '_blank');

// 在窗口1中创建共享Worker
var worker1 = new SharedWorker('worker.js');

// 在窗口2中创建共享Worker
var worker2 = new SharedWorker('worker.js');

// 在窗口1中发送消息给共享Worker
worker1.port.postMessage('Hello from Window 1');

// 在共享Worker中监听message事件接收消息
worker.port.addEventListener('message', function(event) {
  console.log('Message received from Window 1:', event.data);
});

以上是使用Window.open在从父窗口打开的两个同级窗口之间通信的几种方法。具体选择哪种方法取决于具体的需求和场景。腾讯云提供了丰富的云计算产品和服务,可以根据具体需求选择适合的产品,例如云服务器、云数据库、云存储等。更多关于腾讯云产品的信息可以参考腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

窗口创建问题 | Electron 安全

window.open 创建新窗口 除此之外还有两个特例,就是 a 标签和form标签,当 a标签 target 属性被设置为 _blank 时,点击标签会创建新窗口 当 form 标签渲染表达被提交时...当打开 about:blank 时,子窗口 WebPreferences 将从父窗口复制,并且没有办法覆盖它,因为Chromium在这种情况下跳过浏览器侧导航。 6....,如果此时,窗口使用 window.opener 对象 open 方法再打开一个与父窗口同源窗口,并且获取新窗口对象,用这个对象与父窗口进行通信,会不会就可以获取到父窗口上下文了呢?...) 失败了,但即使成功的话,这次新建窗口与非同源窗口之间关系也是非同源,其实是没啥用,这个思路就不行,有点骑驴找驴意思 0x06 漏洞案例 远古时期,window.open 可以通过 file...,非同源就需要 IPC 通信window.open 不支持打开自签名证书 https 网站 官方建议不用 window.open ,同时也给出了一些事件来监听新窗口创建,app 对象监听 web-contents-created

10110

跨标签页通信8种方式(上)

引言--跨标签页通信是指在浏览器中不同标签页之间进行数据传递和通信过程。传统Web开发中,每个标签页都是相互独立,无法直接共享数据。...然而,有时候我们需要在不同标签页之间进行数据共享或者实现一些协同操作,这就需要使用跨标签页通信来实现。...}};window.open、window.postMessage通过一个标签页中使用window.open打开另一个标签页,并使用window.postMessage进行消息传递,可以实现跨标签页通信...;总结--BroadCast Channel:使用Broadcast Channel API可以不同浏览器上下文之间进行消息广播和接收。...window.open、window.postMessage:通过一个标签页中使用window.open打开另一个标签页,并使用window.postMessage进行消息传递,可以实现跨标签页通信

40530

JavaScript中window.open()和Window Location href区别

//顶层页面打开新页面 2:window.open()用法 open() 方法用于打开一个新浏览器窗口或查找一个已命名窗口。...、下拉列表和DIV等做链接时一般都要用Javascript来完成,和做普通链接一样,可能我们需要让链接页面在当前窗口打开,也可能需要在新窗口打开,这时我们就可以使用下面两项之一来完成: window.open...","_top"); 5:是否打开其他网站地址 window.open()是可以一个网站上打开另外一个网站地址 而window.location()是只能在一个网站中打开本网站网页 window.open...:   打开一个窗口   注意:使用“#”是虚连接。   ...11:打开新页面 用window.open()打开新页面 但是用window.location.href="" 却是窗口打开. 有时浏览器会一些安全设置window.open肯定被屏蔽。

2.1K51

JavaScript中window.open()和Window Location href区别「建议收藏」

框架内指定页面打开连接 5:是否打开其他网站地址 6:window.open()经过设置后弹出窗口 7:用函数控制弹出窗口: 8 :同时弹出两个窗口 9: 【弹出窗口之定时关闭控制】   ...//父页面打开新页面 top.location.href;//顶层页面打开新页面 2:window.open()用法 open() 方法用于打开一个新浏览器窗口或查找一个已命名窗口。...你网址”,”_top”); 5:是否打开其他网站地址 window.open()是可以一个网站上打开另外一个网站地址 而window.location()是只能在一个网站中打开本网站网页...用一个连接调用:   打开一个窗口   注意:使用“#”是虚连接。   ...11:打开新页面 用window.open()打开新页面 但是用window.location.href=”” 却是窗口打开.

3.7K20

作为window对象属性元素 多窗口和窗体

和独立不同之处在于,js脚本能够看到其祖先和子孙 打开和关闭窗口 使用windowopen可以打开一个新标签页 window.open将会载入指定url到新或者已经存在窗口中(取决于如何设置...(或者递归打开窗口),脚本才能通过名字指定存在窗口,或者如果是一个窗口内嵌另一个窗口窗体,那么它们脚本之间可以相互导航。...其closed值为true,并且document值为null,其方法也不能使用 窗体之间关系 window对象方法open()可以打开并创建一个新window对象(即创建一个新窗口)并且该窗口是具有...事实上,全局对象会在窗口或窗体载入新内容时被替换,即window对象实际不是全局对象,是一个代理,即windowProxy ps 需要注意一点多个标签或者窗体时候,每个窗体仅仅为一个线程,线程之间使用是一个浏览器定义好...api 即 Window.localStorage 或者是 Cookie 加 轮询达到多个标签之间通信目的。

2.1K50

js实现网页弹出窗口代码详细教程

这一段代码可以加入html任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。... 这里定义了一个函数openwin(),函数内容就是打开一个窗口调用它之前没有任何用途。 怎么调用呢?...方法一:<body > 浏览器读页面时弹出窗口; 方法二:<body > 浏览器离开页面时弹出窗口; 方法三:用一个连接调用: <a href="#" >打开一个窗口注意:使用“#”...【8、内包含弹出窗口-一个页面两个窗口】 上面的例子都包含两个窗口,一个是主窗口,另一个是弹出窗口。 通过下面的例子,你可以一个页面内完成上面的效果。...我们使用cookie来控制一下就可以了。

26.6K50

JavaScript 高级程序设计(第 4 版)- BOM

,返回值单位为CSS像素 可以使用moveTo()和moveBy()移动窗口(依浏览器而定,这俩方法部分或全部被禁用) moveTo()接收要移动到新位置绝对坐标x和y moveBy()接收相对当前位置两个方向上移动像素数...# 导航与打开窗口 window.open()可以用于导航到指定URL,也可以用于打开新浏览器窗口 接收四个参数:要加载URL、目标窗口、特性字符串和表示新窗口浏览器历史记录中是否代替当前加载页面的布尔值...弹出窗口 window.open()第二个参数不是已有窗口,则会打开一个新窗口或标签页 第三个参数即特性字符串,用于指定新窗口配置 如果不指定这会带所有默认浏览器特性 如果打开不是新窗口,...则忽略第三个参数 window.open()返回一个对新建窗口引用,可以以此控制新窗口 可以用close()关闭新打开窗口 新建窗口window对象有一个属性opener,指向打开窗口 窗口不会跟踪记录自己打开窗口...,需要开发者自己管理 某些浏览器中,每个标签页会运行在独立进程中,如果一个标签打开了另一个,而window对象需要和另一个标签页通信,则新标签页不能运行在独立进程中(在这些浏览器中,将新开标签页opener

1.2K10

js window.open

—— 杰普莉茨卡娅 有时我们需要在js中触发打开新标签页、或者是在当前页面跳转以及iframe中替换父页面 使用window.open即可,关于它参数,为以下四个: URL:需要打开页面URL...window.open("https://vampireachao.gitee.io/") name:打开页面的方式或名称 // 新窗口打开,默认 window.open("https://vampireachao.gitee.io.../","_blank") // 父窗口打开,ifame中使用 window.open("https://vampireachao.gitee.io/","_parent") // 当前窗口打开 window.open...("https://vampireachao.gitee.io/","_self") // 顶层窗口打开,iframe中使用 window.open("https://vampireachao.gitee.io.../","_top") specs:属性,不同属性用逗号隔开,key和value之间用等号 // 设置宽高 window.open("https://vampireachao.gitee.io/","_blank

1.9K10

【JS】504- HTML5 之跨域通讯(postMessage)

通常,对于两个不同页面的脚本,只有当执行它们页面位于具有相同协议(通常为 https),端口号(443 为 https 默认值),以及主机 (两个页面的模数 Document.domain 设置为相同值...) 时,这两个脚本才能相互通信。... contentWindow 属性、执行 window.open 返回窗口对象、或者是命名过或数值索引 window.frames。...发送消息时候,如果目标窗口协议、主机地址或端口这三者任意一项不匹配 targetOrigin 提供值,那么消息就不会被发送; 只有三者完全匹配,消息才会被发送。...source 对发送消息窗口对象引用, 我们可以使用此来具有不同 origin 两个窗口之间建立双向通信

1.7K10

window.showModalDialog()用法

,如果是chrome或者火狐浏览器,可以使用window.open()方法,window.open()具体用法参考https://www.cnblogs.com/wugongzi/p/13438578...区别: window.showModalDialog()和window.open()都可以打开页面,两者之间有什么区别?...用window.showModalDialog()打开窗口,只有等打开窗口关闭后,才会执行后面的js代码(同步);而window.open()打开窗口同时就会继续往下执行代码(异步),所以如果你想等获取到子页面的值以后去执行方法...,建议使用showModalDialog()方法 2.用法 现在我们一起来看一下showModalDialog具体该如何使用 我们新建两个页面,放在同一个文件夹下面,名称分别为parent.html和child.html...父页面中打开子页面窗口,并传递参数。子页面收到父页面传递过来参数后进行输出,同时当子页面关闭时将返回值传递给父页面。父页面获取到返回值后进行输出。 parent.html <!

1.6K20

前端猿要了解基本浏览器(BOM)知识

所以使用时最好先判断浏览器是否支持决定取哪一个值(Left和Top或者X和Y) moveTo() 和 moveBy() 都接受两个参数 moveTo(x,y) 表示直接移动到某个坐标(x,...(300,600); w.resizeBy(50,50); w.moveTo(400,300); w.moveBy(20,20); //将会在屏幕中间位置打开一个长方形大小窗口 导航和打开窗口 window.open...打开新网页,浏览器窗口是无法用代码关闭,必须由人自己关闭 var w = window.open("https://www.baidu.com/","Baidu","width=300,height...=200"); w.close(); //关闭新打开网页 opener 该属性是用来确定是否用单独线程运行新网页,设置后即表示打开网页用新进程运行,无需与其他页面(window对象)互相通信,一旦设置就无法恢复了...会强制弹出窗口中显示地址栏 另外浏览器甚至规定,一个页面尚未加载完成时,不允许执行 window.open() 语句,只能通过单击某个浏览器提供按钮或者敲键盘打开 当然也可以为自己浏览器安装弹窗屏蔽插件

83910

window location href页面跳转几种用法及其延展「建议收藏」

如果页面中自定义了frame,那么可将parent、self、top换为自定义frame名称,效果是frame窗口打开url地址。...用window.open()打开新页面 但是用window.location.href=”” 却是窗口打开. 有时浏览器会一些安全设置window.open肯定被屏蔽。...window.open是用来打开一个新窗口函数!...然而 window,open()不一定是打开窗口 在有窗口名称和window.open中第二个参数中一样就会将这个窗口替换,用这个特性的话可以iframe和frame中来代替location.href...()是可以一个网站上打开另外一个网站地址 window.location()是只能在一个网站中打开本网站网页 本文参考互联网上多篇博客编辑修改完成,展示出来供大家参考使用 发布者:全栈程序员栈长

4.5K10

窗口打开页面?小心有坑!

打开页面地址是动态计算使用js进行window.open(url)搞定。 如果你人品比较好,你页面可以顺利地运行到下线为止。...机智读者会发现上面的两个例子中分别复现了安全和性能问题(讲道理,第2个例子同时展现了安全和性能问题) 3.1 安全问题 使用a标签target="_blank"属性,或者window.open(...url)窗口打开页面时,会存在潜在安全问题。...确实,chrome有不同标签页面使用不同进程和线程,但是有个例外,通过a标签target="_blank"属性,或者window.open(url)窗口打开页面, 会与父窗口共用进程和线程。...解决方案 4.1 使用noopener属性 通过a标签上添加这个noopener属性,可以将新打开窗口opner置为空。

5.2K21

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券