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

React on webapplication changes in different tabs

本文关键字：应用程序 选项 Web      更新时间：2023-09-26

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

欢迎提出任何建议。谢谢

只有当其中一个窗口被另一个使用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是独立打开的，你就不能像这样使用直接通信。然后你基本上有两个选项来完成你想要的（在SO上描述）：

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

  2. 使用AJAX和长轮询（Comet技术）与服务器通信。

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

相关文章：