对不同选项卡中的 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 是独立打开的，则不能像这样使用直接通信。然后，您基本上有两种选择来完成您想要的 (described here on SO)：

1. 使用 cookie：在窗口 A 中设置一个 cookie 以传递数据，并在窗口 B 中使用 setTimeout 定期读取 cookie 以对更改做出反应。见this example。

2. 使用 AJAX 和长轮询 (Comet technique) 与服务器通信。

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