Question

例如，使用youtube center（用户脚本），我可以在一个标签页中播放YouTube视频，然后打开另一个视频，第一个视频将暂停。如果我切换标签并点击播放，则另一个将暂停。用户如何做到这一点？我试着看the source

它似乎使用套接字但看起来套接字是plain object。它说它模仿socket.io我也不知道，但我相信这个没有连接到一个站点，而socket.io呢？

Answer 1

评论说明了它发生了什么。它使用localstorage（HTML5功能）来编写和通知：

/ ** *建立在顶部的跨窗口广播服务 * HTML5 localStorage API。界面 *模仿socket.io的设计。 *

以下几行设置了侦听器。

if (identifier === 6) {
      session_addEventListener("storage", storageHandler);
    } else if (window.attachEvent) {
      document.attachEvent('onstorage', storageHandler);
      ytcenter.unload(function(){
        document.detachEvent("storage", storageHandler);
      });
    } else {
      window.addEventListener('storage', storageHandler, false);
      ytcenter.unload(function(){
        window.removeEventListener("storage", storageHandler, false);
      });
    }

显然，两个选项卡上都有监听器，这样每次写入/读取localstorage时都会通知其他选项卡。

简而言之，不，数据不会转到服务器。它只是写入localstorage并依赖浏览器同时在所有选项卡上对localstorage进行更改。

您可以在此处详细了解存储事件：http://dev.w3.org/html5/webstorage/#the-storage-event

值得注意的是，事件不会立即可用，只有在激活文档时（即您的事件不会在标签处于活动状态之前得到处理）。我假设不同的浏览器处理“激活”问题。不同。

这样的Document对象不一定是完全活动的，但事件循环会忽略在这些对象上触发的事件，直到Document再次完全活动为止。

JS IPC;从一个标签发送消息到另一个标签？

1 个答案: