是否可以使用JavaScript重新加载特定的浏览器标签? [英] Is it possible to reload specific browser tabs using JavaScript?

问题描述

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

I have a scenario like ,one main Tab which contains some master data . Once i click on a particular entry in master tab another tab(child tab) will open in same browser with more details of the selected entry. I can perform some update action in the child tab , and it will update the details in DB.

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

What i need to achieve is ,if i perform any action in child tab i need to refresh my Main tab so that whatever changes i have made in child page has to be reflected in main tab.

感谢您的帮助.

推荐答案

有两种方法可以做到这一点:

There are a couple of ways to do this:

1. 在子选项卡中，使用opener调用主选项卡中的全局函数. opener自动全局引用是对打开当前窗口的窗口的引用.请注意，如果用户将选项卡添加为书签，然后关闭它，然后从书签中打开它，则不会再设置opener，因为该窗口没有被另一个窗口打开.

1. In the child tab, use opener to call global functions in the master tab. The opener automatic global is a reference to the window that opened the current window. Note that if the user bookmarks the tab, closes it, and then opens it from the bookmark, opener won't be set anymore, since the window wasn't opened by another window.

使用网络存储，并让主标签监视storage窗口上的事件.当子选项卡使用(例如)localStorage.setItem("foo", "new value")时，主选项卡将看到storage事件，并且能够看到"foo"键的值已更改.这样做的好处是您不必依赖opener链接.子窗口的打开方式无关紧要，相同来源内的所有窗口都将看到storage事件(如果使用localStorage而不是sessionStorage —该事件也会针对sessionStorage引发，但仅适用于共享同一sessionStorage区域的窗口；我必须承认我对如何发生的细节并不满意，但对于简单的此窗口已打开另一个窗口"却不会发生而不是顶级浏览上下文"，因此对于您的用例，localStorage可能是您想要的).

Use web storage and have the master tab watch for the storage event on the window. When the child tab does (say) localStorage.setItem("foo", "new value"), the master tab will see the storage event and be able to see that the "foo" key's value changed. This has the advantage that you're not relying on the opener link; it doesn't matter how the child windows are opened, all windows within the same origin will see the storage event (if you use localStorage rather than sessionStorage — the event is also raised for sessionStorage, but only for windows that are sharing the same sessionStorage area; I have to admit I'm not au fait with the details of how that happens but it doesn't happen with the simple "this window opened another", it has to to with not being a "top level browsing context," so for your use case, localStorage is probably the one you want).

#1示例

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

Example of #1

In master.html, we have a link that opens a tab:

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

...以及一个全局函数(请注意，必须具有全局功能):

...and a global function (note that it's important that it be global):

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

在child.html中，我们在需要更新时执行此操作:

In child.html, we do this when we need to do an update:

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重新加载特定的浏览器标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！