How to change browser focus from one tab to another

Question

I have a JavaScript chat client running in one browser tab (call it tab A). Now when a message arrives the user might be on another browser tab (call it tab B). I'm looking for ways to change the focus from tab B to my chat client (tab A) when such a message arrives.

I could not find a way to do this.

Bilestone

At this point changing focus from tab to tab could be achieved using the ServiceWorker API. It would be someway a hack though. – Uraemia

Can you elaborate? – Skilken

Answer 1

It is not possible - due to security concerns.

unless by "tab" you mean a window and a popup window that (due to browser preferences) opened up in a new tab. If this is the case, then yes you can.

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

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

Busiek

window.opener.focus() does not work for me when tabbed #17238042 – Inductile

@RobbieVercammen no the focus() method called here is a method on the window object. (Similar to the native focus() on form fields) – Busiek

Is it possible if you run the browser without web security? Is it possible from a program running outside the browser? Is there an API allowing an external program to communicate with the browser and set things? – Figuration

Answer 2

It is possible to shift focus back to Tab A by means of an alert in Tab A e.g. alert('New Message')

However, you need to be careful using this as it is very likely to annoy people. You should only use it if you make it optional in your app. Otherwise, updating Tab A's title and/or the favicon would appear to be best as nc3b says.

Rohr

Using alert makes all js in this page stopped. Not a good ideal – Cw

Answer 3

The best you could would probably be to change the title of the page alerting the user the tab needs attention (maybe also the favicon - look at how meebo does it, it's really annoying but effective)

Spectroscope

Twitter does something similar in that it adds a count if there are new messages to be read, so I agree that's probably the best way to go. – Jephthah

Answer 4

Chrome and firefox now have notifications. I think notifications are probably a more user friendly way to alert the user that something has changed on your app than popping an alert and forcing them to your page.

Indefensible

Answer 5

Using Javascript, triggering an alert can have the desired effect. Run this code in your console, or add to your html file in one tab and switch to another tab in the same browser.

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

The alert appearing after the timeout will trigger tab switch. Or you can do something similar! For UX reasons however, you can still use a ping or add and indicator like in Facebook's message counter in the page title ( (1) Facebook ). You can also experiment with Notifications API (experimental).

Conlin

Worth to note that alert shall be triggered inside window.opener, not the actually window. – Noodle

Answer 6

this worked for me on form submit to reopen the target window.. so it will call window.open on the same target (or new if changed) and then continue to submit the form.

        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>

Flimsy

Answer 7

Some regular chrome based browser may be controlled by chrome debugger protocol, If browser open with flag --remote-debugging-port=***,I have used the tool cyrus-and/chrome-remote-interface on github and call the CDP.Activate([options],callback) method to switch the browser tab. It works on New MS Edge, should work on chrome also. But sadly this did not work in vivaldi browser, the most feature rich browser I want to use.

Disentail

Answer 8

If you have popup permissions, you can do this. It doesn't appear to work on Chrome, only Firefox. Maybe this is a bug?

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);

Since replacing the code with window.focus() doesn't work but this workaround does, I am pretty sure this is a bug. Interestingly, if you remove the close call, it makes a new tab on Chrome, just won't focus the opener.

Ayr

I don't think the snip will work. You will just have to copy it into the console and then switch to another tab. Then after 2.5 seconds, you will be back onto this tab, assuming you gave StackOverflow access to open popups (without user interaction) – Ayr