【问题标题】:How to change browser focus from one tab to another如何将浏览器焦点从一个选项卡更改为另一个选项卡
【发布时间】:2011-02-11 20:24:18
【问题描述】:

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

我找不到这样做的方法。

【问题讨论】:

  • 此时可以使用 ServiceWorker API 将焦点从选项卡更改为选项卡。不过,这在某种程度上是一种黑客行为。

标签: javascript focus


【解决方案1】:

出于安全考虑,不可能

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

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

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

【讨论】:

  • window.opener.focus() 选项卡时对我不起作用*.com/questions/17237542/…
  • @RobbieVercammen 不,这里调用的 focus() 方法是窗口对象上的方法。 (类似于表单字段上的原生 focus())
  • 是否可以在没有网络安全的情况下运行浏览器?是否可以通过在浏览器外部运行的程序来实现?是否有 API 允许外部程序与浏览器通信并进行设置?
【解决方案2】:

可以通过选项卡 A 中的警报将焦点转移回选项卡 A,例如alert('新消息')

但是,您需要小心使用它,因为它很可能会惹恼人们。只有在您的应用程序中将其设为可选时,您才应该使用它。否则,更新选项卡 A 的标题和/或网站图标似乎是 nc3b 所说的最佳选择。

【讨论】:

  • 使用alert会使该页面中的所有js停止。不是一个好的理想
【解决方案3】:

最好的办法可能是更改页面标题,提醒用户标签需要注意(也许还有 favicon - 看看 meebo 是如何做到的,这真的很烦人但很有效)

【讨论】:

  • Twitter 做了类似的事情,如果有新消息要阅读,它会增加计数,所以我同意这可能是最好的方法。
【解决方案4】:

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

【讨论】:

    【解决方案5】:

    这对我在表单提交以重新打开目标窗口时有用.. 所以它会在同一个目标上调用 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>

    【讨论】:

      【解决方案6】:

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

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

      超时后出现的警报会触发标签切换。或者你可以做类似的事情!然而,出于用户体验的原因,您仍然可以在页面标题 ( (1) Facebook ) 中的 Facebook 消息计数器中使用 ping 或添加和指示器。您还可以尝试使用Notifications API(实验性)。

      【讨论】:

      • 值得注意的是,警报应该在window.opener内部触发,而不是实际的window
      【解决方案7】:

      一些常规的基于chrome的浏览器可能会被chrome调试器协议控制,如果浏览器打开时带有标志--remote-debugging-port=***,我已经使用了github上的工具cyrus-and/chrome-remote-interface并调用CDP.Activate([options],callback)方法来切换浏览器选项卡。它适用于 New MS Edge,也应该适用于 chrome。但遗憾的是,这在我想使用的功能最丰富的浏览器 vivaldi 浏览器中不起作用。

      【讨论】: