10

I would like to have a button on a web page with the following behavior:

  • On the first click, open a pop-up.
  • On later clicks, if the pop-up is still open, just bring it to the front. If not, re-open.

The below code works in Firefox (Mac & Windows), Safari (Mac & Windows), and IE8. (I have not yet tested IE6 or IE7.) However, in Google Chrome (both Mac & Windows) later clicks fail to bring the existing pop-up to the front as desired.

How can I make this work in Chrome?

<head>
  <script type="text/javascript">
    var popupWindow = null;
    var doPopup = function () {
      if (popupWindow && !popupWindow.closed) {
        popupWindow.focus();
      } else {
        popupWindow = window.open("http://google.com", "_blank",
          "width=200,height=200");
      }
    };
  </script>
</head>

<body>
  <button onclick="doPopup(); return false">
    create a pop-up
  </button>
</body>

Background: I am re-asking this question specifically for Google Chrome, as I think I my code solves the problem at least for other modern browsers and IE8. If there is a preferred etiquette for doing so, please let me know.

Community
  • 1
  • 1
brahn
  • 12,096
  • 11
  • 39
  • 49
  • 1
    Looks like this problem was reported ~1.5 years ago: http://code.google.com/p/chromium/issues/detail?id=1674 – brahn Apr 24 '10 at 16:27

5 Answers5

8

You can't. Window.focus is disabled in Chrome for security reasons, and that is unlikely to change.

You have to close and repopen the respective window.

Stefan Steiger
  • 78,642
  • 66
  • 377
  • 442
  • 3
    Oof, that's frustrating. Out of curiousity, what is the security concern? I see some discussion of what might be related reasoning [here](http://code.google.com/p/chromium/issues/detail?id=1383#c8), though that seems more about the popup stealing focus from the parent window rather than the parent window giving focus to the popup (which is what I'm looking for). Thanks! – brahn Apr 24 '10 at 16:33
  • 1
    I'd also like to know about the concerns involved. – marquito Mar 17 '14 at 15:18
  • After all these years this is still a major frustration as a user, let alone a developer. It would be good if someone would provide a link to something that nicely explains the reason because as-is "for security reasons" sounds like train companies saying "for the benefit of passengers" when they impose some expedient regulation that patently isn't. – Nick Rice May 17 '16 at 07:30
  • Most basically, because a-holes will pop windows in front to get advertising clicks. Until the web isn't driven by ads, this is the web we live with. – Michael Cole Jan 12 '17 at 17:39
  • @Michael Cole: Amen ;) And not only that - they can keep it in front and you're unable to close it, and it repopens when you close the window - until you click that f*ing add (or malware). – Stefan Steiger Jan 24 '17 at 09:16
0

Why not just do a popopWindow.focus() after the window.open call? It won't hurt to do it there too, and it should ensure that your new window is shown on top of the current one.

Chris
  • 27,596
  • 25
  • 124
  • 225
  • The current code results in the desired behavior (i.e. popup on top) with the new window -- the problem is with an existing window. – brahn Apr 24 '10 at 05:38
0

You need to set original window to blur and the new window to focus.

var popup = {  //popup = object literal representing your popup
    execute = (function () {
        popup.win = window.open();
        popup.win.focus();
    }());
};
window.blur();
  • I'm not sure I understand this code, but like Chris's comment above it seems to ensure that the popup is focused when it's first opened, but doesn't do anything to focus it on a later button click. – brahn Apr 24 '10 at 16:07
  • That is correct. There is not an "always on top" method available to JavaScript and there will never be such a thing. When you click outside the window of the popup it will loose focus and fall behind the window that receives focus. The only way to change this is to click back into the popup window. –  Apr 24 '10 at 16:26
  • This method no longer works for newer versions of Chrome (21+) – marquito Mar 17 '14 at 15:18
0

The following code works for me when called in a onclick handler:

var popup = window.open('', 'popup-name', 'resizable,width=480=height=575');

if(popup.location == 'about:blank') {
    popup.location = 'http://google.com';
    return;
}

This code works by trying to access the popup's location, if its about:blank its a new popup and the url is set. Otherwise if the window with the same name 'popup-name' is already open the popup comes into focus. This code does need to be called from a onclick handler otherwise it will not work.

Scott
  • 3,290
  • 4
  • 29
  • 48
0

As of today, just calling focus() on the reference to the popup just works and brings the window to the front. I am using Chrome version 62

Varun
  • 1
  • 1