如何将浏览器焦点从一个标签页切换到另一个标签页

Question

我有一个在浏览器标签页A中运行的JavaScript聊天客户端。当消息到达时，用户可能在另一个浏览器标签页B上。我正在寻找一种方法，在此类消息到达时从标签页B更改焦点到我的聊天客户端（标签页A）。

我找不到这样做的方法。

- Max

---

此时，使用ServiceWorker API可以实现从选项卡到选项卡的焦点转移。尽管这可能有些不正规。 - Boris D. Teoharov

你能详细说明一下吗？ - Mark

Answer 1

由于安全问题，这是不可能的。

除非你所说的“标签页”是指一个窗口和一个弹出窗口（由于浏览器偏好设置）在新标签页中打开。如果是这种情况，那么是可以的。

//focus opener... from popup
window.opener.focus();

//focus popup... from opener
yourPopupName.focus(); 

- scunliffe

---

当使用选项卡时，window.opener.focus()对我不起作用。https://dev59.com/_XPYa4cB1Zd3GeqPkpf1 - magritte

@RobbieVercammen 不，这里调用的focus()方法是窗口对象上的一个方法。（类似于表单字段上的本地focus()方法） - scunliffe

你能否在浏览器中禁用网络安全性？从浏览器外部运行的程序是否可以实现？是否有API允许外部程序与浏览器通信并设置内容？ - Henrik4

Answer 2

你可以通过 Tab A 中的警报（例如 alert('New Message')）将焦点回移到 Tab A。

但是，你需要小心使用此功能，因为很容易让人感到烦恼。如果在应用程序中使其成为可选项，那么才应该使用它。否则，更新 Tab A 的标题和/或网站图标似乎是最好的选择，就像 nc3b 所说的那样。

- Autoabacus

---

使用 alert 会使得页面中所有的 JavaScript 停止运行。这不是一个好主意。 - ntlam

Answer 3

您最好的做法可能是更改页面标题，提示用户该选项卡需要关注（也许还要更改网站图标 - 看看meebo是如何做到这一点的，虽然很烦人但非常有效）

- nc3b

---

Twitter在这方面做了类似的事情，如果有新消息要阅读，它会添加计数，所以我认为那可能是最好的方法。 - Matthew Daly

Answer 4

Chrome和Firefox现在都支持通知。我认为通知可能是一种更用户友好的方式，用于提醒用户应用程序中发生了什么变化，而不是弹出警报并强制他们进入你的页面。

- CallMeNorm

Answer 5

通过使用Javascript，触发警报可以产生预期的效果。在您的控制台中运行此代码，或将其添加到您的html文件中的一个选项卡中，并切换到同一浏览器中的另一个选项卡。

setTimeout(function(){ 
    alert("Switched tabs");
}, 
5000);

超时后出现的警报将触发选项卡切换。或者您可以做类似的事情！出于用户体验的考虑，您仍然可以在页面标题中使用ping或添加一个指示器，例如Facebook消息计数器((1) Facebook)。您还可以尝试使用通知API（实验性）进行实验。

- William

---

值得注意的是，警报应该在window.opener内触发，而不是实际的window。 - Nik Sumeiko

Answer 6

当表单提交时，以下内容对我非常有帮助：重新打开目标窗口。因此，它将在相同的目标上调用window.open（或更改后的新目标），然后继续提交表单。

        var open_target = function (form){
            var windowName = jQuery(form).attr('target');
            window.open("", windowName );
            return true;
        };

    <form target="_search_elastic" onsubmit="return open_target(this);">
      </form>

- Artistan

Answer 7

一些基于Chrome的普通浏览器可能可以通过Chrome调试协议进行控制，如果使用标志--remote-debugging-port=***打开浏览器，在GitHub上我已经使用了工具cyrus-and/chrome-remote-interface并调用CDP.Activate([options],callback)方法来切换浏览器选项卡。它适用于新版Edge，应该也适用于Chrome。但不幸的是，在我想要使用的最功能丰富的Vivaldi浏览器中，这种方法没有生效。

- towith