是否可以使用JavaScript重新加载特定的浏览器选项卡？

Question

我有一个场景，比如，一个主标签，其中包含一些主数据。一旦我单击主选项卡中的特定条目，将在同一个浏览器中打开另一个选项卡(子选项卡)，其中包含所选条目的更多详细信息。我可以在子选项卡中执行一些更新操作，它将更新DB中的详细信息。

我需要实现的是，如果我在子选项卡中执行任何操作，我需要刷新我的主选项卡，以便我在子页中所做的任何更改都必须反映在主选项卡中。

任何帮助都是非常感谢的。

Answer 1

有几种方法可以做到这一点：

1. 在子选项卡中，使用opener调用主选项卡中的全局函数。opener自动全局是对打开当前窗口的窗口的引用。注意，如果用户书签标记，关闭它，然后从书签打开它，opener将不再被设置，因为窗口不是由另一个窗口打开的。
2. 使用web存储并让主选项卡监视窗口上的storage事件。当子选项卡执行(例如) localStorage.setItem("foo", "new value")时，主选项卡将看到storage事件，并能够看到"foo"键的值更改。这具有不依赖于opener链接的优点；无论如何打开子窗口，同一来源中的所有窗口都将看到storage事件(如果使用localStorage而不是sessionStorage--该事件也是为sessionStorage引发的，但仅针对共享相同sessionStorage区域的窗口；我不得不承认，我对这种情况发生的细节并不陌生，但它不会发生在简单的“这个窗口打开了另一个窗口”中，它必须不是一个“顶级浏览上下文”，所以对于您的用例来说，localStorage可能是您想要的)。

#1的例子

在master.html中，我们有一个打开选项卡的链接：

<a href="child.html" target="_blank">Click to open child tab</a>

...and是一个全局函数(请注意，它必须是全局的)：

function tabUpdate(update) {
    // Do something with the update from the child tab
    $("<p>").html(update).appendTo(document.body);
}

在child.html中，当我们需要进行更新时，我们会这样做：

opener.tabUpdate("Update at " + Date.now());

#2的例子

在master.html中

$(window).on("storage", function(e) {
    var event = e.originalEvent; // Get access to the storage-specifics
    if (event.key == "foo") { // Or whatever
        // Do something with event.newValue
    }
});

在child.html中

// When we want to send an update to master:
localStorage.setItem("foo", "new value");