Question

如何在没有任何服务器端支持的情况下准备通信通道在同一浏览器中的多个打开的选项卡之间进行通信？

Answer 1

您还可以使用Window.localStorage并注册StorageEvent并对其他标签做出反应这是一本有趣的读物：Using the Web Storage API;

示例使用 localStorage 和 StorageEvent

将其放入page1.html

<button>CLICK ME TO CHANGE "A" - "B"</button>
<script>
document.querySelector("button").addEventListener("click", function(){
  localStorage.ab = localStorage.ab ===  "A" ? "B" : "A";
});
</script>

将其转换为page2.html

<script>
window.addEventListener("storage", function( StorageEvent ){
  console.log( StorageEvent );
  alert(StorageEvent.newValue);
});
</script>

Answer 2

您还可以利用Web-Sockets实现跨标签和浏览器的基于事件的实时通信。像Socket.io这样的图书馆使整个过程变得非常简单。

两个标签如何在浏览器内进行通信？

2 个答案: