如何在同一页面上调用具有先前实例的浏览器选项卡

Posted 2023-02-16

【中文标题】如何在同一页面上调用具有先前实例的浏览器选项卡

【英文标题】：How to recall browser tab with previous instance on same page

【发布时间】：2020-04-19 15:05:33

【问题描述】：

我有一个包含几个链接的页面。 每个链接都会在新标签页中打开。 下次我单击给定链接时，我希望它重新调用之前打开的相同选项卡。 是否可以？怎么样？ 所有页面都来自同一个域。

我看过这个答案： Check if my website is open in another tab 似乎可以将 URI 存储在 localStorage 中，以进行重复检测。 我认为这种技术可以让我检测到重复，但我不知道如何瞄准特定的标签（激活它，把它放在前面）。 我不控制服务器，需要在客户端（通过 Tampermonkey）实现它。

出于好奇，我经常处理 BitBucket 问题。 带有链接的页面是问题列表，其他页面是单个问题。 我希望避免两次打开同一个问题、更新两个版本并丢失数据。 此外，每个页面可以有两个不同的 URI，一个用于查看，另一个用于编辑。但我想我可以用 JS 解决它。

【参考方案1】：

按名称调用浏览器选项卡

您可以先使用window.open() 为您创建的每个选项卡指定一个名称：

let newWindow = window.open(newUrl, newWindowName);

或通过在锚标记中使用target 属性：

<a href="http://my-new-url" href="myNewWindowName">Make New Window</a>

如果您随后使用现有选项卡的名称调用 window.open，则将使用现有选项卡。如果该名称的窗口不存在，window.open 将创建一个新窗口（或选项卡）。

Window.open 的 MDN 网络文档页面

---

将窗口置于最前面

单独使用window.open() 可能不足以将窗口置于前面。这可以通过不同的函数window.focus() 来实现，它发出将窗口置于前面的请求。将两者结合起来：

window.open(myUrl, myWindowName).focus();

警告：浏览器的用户偏好设置可能仍会阻止 focus() 将窗口置于最前面，因此不能保证这会起作用。来自 MDN 网络文档：

由于用户设置可能会失败，并且在此方法返回之前不能保证窗口位于最前面。

【讨论】：

不错！似乎可行。我将不得不控制索引页面的链接并用window.open 命令替换它们。

@JuanLanus 我认为您可以将名称放在链接target= 属性中。它通常用于target="_blank"，但我认为它可以接受任何名称。

@TomášZato-ReinstateMonica：会试一试，听起来对简化所需的代码很有用。是的，它接受任何东西，所以我可以使用可重复的 slug 来解决每个问题页面，例如“issue1234”（不要“#”）。

【参考方案2】：

您可以通过以下方式获取上一页的 URL：

let prevURL = document.referrer;

您可以使用 windows.getAll() function 从所有打开的选项卡中获取 URL。

从此answer - 由于安全问题，您不能以编程方式将浏览器聚焦到特定选项卡。考虑更新标题以通知用户document.title = new title

【讨论】：

是的，我不能，但是...随意带大。这很好！