如何将浏览器焦点从一个选项卡更改为另一个选项卡

Question

我有一个 JavaScript 聊天客户端在一个浏览器选项卡（称为选项卡 A）中运行。现在，当消息到达时，用户可能位于另一个浏览器选项卡上（称为选项卡 B）。当此类消息到达时，我正在寻找将焦点从选项卡 B 更改为我的聊天客户端（选项卡 A）的方法。

我找不到办法做到这一点。

Answer 1

出于安全考虑，这是不可能。

除非“选项卡”是指在新选项卡中打开的窗口和弹出窗口（由于浏览器首选项）。如果是这种情况，那么可以。

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

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

Answer 2

可以通过选项卡 A 中的警报将焦点移回选项卡 A，例如警报（'新消息'）

但是，您需要小心使用它，因为它很可能会惹恼人们。仅当您在应用程序中将其设置为可选时才应使用它。否则，正如 nc3b 所说，更新选项卡 A 的标题和/或图标似乎是最好的。

Answer 3

最好的办法可能是更改页面标题，提醒用户该选项卡需要注意（也许还有图标 - 看看 meebo 是如何做到的，这确实很烦人但很有效）

Answer 4

Chrome 和 Firefox 现在有通知。我认为通知可能是一种更用户友好的方式来提醒用户您的应用程序上发生了某些变化，而不是弹出警报并强制他们进入您的页面。

Answer 5

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

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

超时后出现的alert会触发tab切换。或者你也可以做类似的事情！然而，出于用户体验的原因，您仍然可以使用 ping 或添加指示器，就像页面标题中 Facebook 的消息计数器 ( (1) Facebook ) 一样。您还可以尝试使用 Notifications API（实验性）。

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>

Answer 7

一些常规的基于 chrome 的浏览器可能由 chrome 调试器协议控制，如果浏览器以

--remote-debugging-port=***

标志打开，我已经使用了 github 上的工具

cyrus-and/chrome-remote-interface

并调用

CDP.Activate([options],callback)

方法来切换浏览器选项卡。它适用于 New MS Edge，也应该适用于 Chrome。但遗憾的是，这在我想使用的功能最丰富的浏览器 Vivaldi 浏览器中不起作用。

Answer 8

如果您有弹出权限，则可以执行此操作。 它似乎不适用于 Chrome，仅适用于 Firefox。也许这是一个错误？

setTimeout(()=>{
    const win = open("about:blank"); // open a blank window. Requires popup permission if the user hasn't interacted with the tab recently. 
    if(!win) return; // Ignore the case when the user doesn't allow access past the popup blocker
    win.opener.focus(); // Focus the opener (this tab)
    win.close(); // Close the window, preventing unnecessary tabs for the user, and make it look more seamless 
}, 2500);

由于用

window.focus()

替换代码不起作用，但此解决方法可以，我很确定这是一个错误。 有趣的是，如果您删除

close

调用，它会在 Chrome 上创建一个新选项卡，只是不会将焦点放在打开器上。