浏览器标签/窗口之间的Javascript通信

作者: 氷寒
发布时间: 2025-01-14 07:03:13 (6天前)
转自：

8 条回复

0#
回复此人
纾潆锦袖迷子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为你不需要饼干。每个文档的js代码都可以访问其他文档元素。因此，您可以直接使用它们来共享数据。你的第一个窗口w1打开w2并保存引用 </p> <pre> <code> var w2 = window.open(...) </code> </pre> <P> 在w2中，您可以使用window的opener属性访问w1。 </p> </DIV>

编辑
1#
回复此人
CC-f | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果文档的来源相同，甚至在HTML5之前就支持在不同的JavaScript执行上下文之间进行通信。如果没有，或者你没有引用另一个 <code> Window </code> 对象，然后你可以使用新的的<strong> postMessage API </强> 随HTML5一起推出。我在这两个方法中详细阐述了一下 <a href="https://stackoverflow.com/a/18004937/1268003"> stackoverflow的答案 </A> 。 </p> </DIV>

编辑
2#
回复此人
特狼普 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 编辑：使用Flash，您可以在任何窗口，任何浏览器之间进行通信（是的，在运行时从FF到IE）..某种形式的flash实例（ShockWave / activeX） </p> </DIV>

编辑
3#
回复此人
丫头 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 还有一种叫做的实验技术 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API" rel="noreferrer"> <code> Broadcast Channel API </code> </A> 专为具有相同来源的不同浏览器上下文之间的通信而设计。您可以发送消息并从其他浏览器上下文接收消息，而无需引用它： </p> <pre> <code> var channel = new BroadcastChannel("foo"); channel.onmessage = function( e ) { // Process messages from other contexts. }; // Send message to other listening contexts. channel.postMessage({ value: 42, type: "bar"}); </code> </pre> <P> 显然这是经验技术，并不是所有浏览器都支持。 </p> </DIV>

编辑
4#
回复此人
真不错 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 窗口下方（w1）打开另一个窗口（w2）。任何窗口都可以向/从另一个窗口发送/接收消息。因此，我们应该理想地验证消息来自我们打开的窗口（w2）。 </p> <P> 在w1 </p> <pre> <code> var w2 = window.open("abc.do"); window.addEventListener("message", function(event){ console.log(event.data); }); </code> </pre> <P> 在w2（abc.do） </p> <pre> <code> window.opener.postMessage("Hi! I'm w2", "*"); </code> </pre> </DIV>

编辑
5#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以通过本地存储API执行此操作。请注意，这仅适用于2个选项卡。您不能将发件人和收件人放在同一页面上： </p> <P> 在发件人页面上： </p> <pre> <code> localStorage.setItem("someKey", "someValue"); </code> </pre> <P> 在接收器页面上 </p> <pre> <code> $(document).ready(function () { window.addEventListener('storage', storageEventHandler, false); function storageEventHandler(evt) { alert("storage event called key: " + evt.key); } }); </code> </pre> </DIV>

编辑
6#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 找到使用HTML5 localstorage的不同方法，我创建了一个包含API等事件的库： </p> <pre> <code> sysend.on('foo', function(message) { console.log(message); }); var input = document.getElementsByTagName('input')[0]; document.getElementsByTagName('button')[0].onclick = function() { sysend.broadcast('foo', {message: input.value}); }; </code> </pre> <P> 它会向所有其他页面发送消息，但不会向当前页面发送消息。 </p> </DIV>

编辑

登录后才能参与评论