Question

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

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

感谢任何帮助。

Answer 1

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

在子选项卡中，使用opener在主选项卡中调用全局函数。 opener自动全局是对打开当前窗口的窗口的引用。请注意，如果用户为选项卡添加书签，关闭它，然后从书签中打开它，则opener将不再设置，因为窗口未被其他窗口打开。
使用web storage并让主标签监视窗口上的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>

......和一个全局函数（注意它是全局函数）：

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");

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

1 个答案:

＃1

＃2