37

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.

Nick
  • 3,143
  • 20
  • 34
Max
  • 371
  • 1
  • 3
  • 3

7 Answers7

24

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();
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • 1
    window.opener.focus() does not work for me when tabbed http://stackoverflow.com/questions/17237542/how-to-set-focus-to-child-and-opener-windows-when-tabbed – magritte Jun 21 '13 at 14:44
  • @RobbieVercammen no the focus() method called here is a method on the window object. (Similar to the native focus() on form fields) – scunliffe Dec 07 '16 at 10:50
  • 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? – Henrik4 Dec 03 '19 at 13:03
9

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.

Autoabacus
  • 107
  • 1
  • 1
8

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)

nc3b
  • 15,562
  • 5
  • 51
  • 63
  • 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. – Matthew Daly Apr 24 '10 at 15:36
7

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.

CallMeNorm
  • 2,299
  • 1
  • 16
  • 23
4

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

William
  • 740
  • 2
  • 11
  • 18
4

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>
Artistan
  • 1,982
  • 22
  • 33
0

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.

towith
  • 109
  • 1
  • 3