javascript - 对不同选项卡中的 Web 应用程序更改做出反应

Question

我有一个 web 应用程序，它同时在两个不同的浏览器窗口/选项卡中运行（我们称它们为 a 和 b）。问题是我需要对选项卡 a 中的点击和窗口 b 中的内容更新做出反应，这些更改需要立即进行。

欢迎任何建议。谢谢。

Answer 1

只有在另一个窗口使用window.open. 如果您的应用程序是这种情况，您可以执行以下操作（即时双向通信）。这只是一个非常基本的示例，但我相信您可以扩展它以满足您的需求。

窗口 A：

var windowB = window.open("windowB.html");   //reference to window B
windowB.onload = function(){
    windowB.triggerChange();
};

function changeOK(str) {
    console.log("windowA: "+str);
}

窗口 B：

var windowA = window.opener;   //reference to window A

function triggerChange() {
    console.log("windowB: triggerChange");
    windowA.changeOK("change done");
}

在尝试之前不要忘记禁用弹出窗口阻止程序。;)

但是，如果窗口 A 和窗口 B 是独立打开的，则不能像这样使用直接通信。然后，您基本上有两种选择来完成您想要的（在此处描述）：

1. 使用 cookie：在窗口 A 中设置一个 cookie 来传递数据，并setTimeout在窗口 B 中使用定期读取 cookie 以对更改做出反应。请参阅此示例。

2. 使用长轮询（彗星技术）的 AJAX 与服务器通信。

由于两种解决方案都使用间接通信，它们显然无法触发窗口 B 中的即时更改。因此您必须等待至少几毫秒，直到 B 的内容可以更新。