In Google Chrome, how do I bring an existing popup window to the front using javascript from the parent window?

Asked 24/4, 2010 at 5:16 Answered 7/8, 2018 at 14:2

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.

Dizon answered 24/4, 2010 at 5:16 Comment(1)

Looks like this problem was reported ~1.5 years ago: code.google.com/p/chromium/issues/detail?id=1674 – Dizon 24/4, 2010 at 16:27

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.

Babism answered 24/4, 2010 at 5:24 Comment(5)

Oof, that's frustrating. Out of curiousity, what is the security concern? I see some discussion of what might be related reasoning here, 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! – Dizon 24/4, 2010 at 16:33

I'd also like to know about the concerns involved. – Cool 17/3, 2014 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. – Gorse 17/5, 2016 at 7: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. – Ignacioignacius 12/1, 2017 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). – Babism 24/1, 2017 at 9:16

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.

Olden answered 24/4, 2010 at 5:19 Comment(1)

The current code results in the desired behavior (i.e. popup on top) with the new window -- the problem is with an existing window. – Dizon 24/4, 2010 at 5:38

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

Suki answered 24/4, 2010 at 5:42 Comment(3)

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. – Dizon 24/4, 2010 at 16:7

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. – Suki 24/4, 2010 at 16:26

This method no longer works for newer versions of Chrome (21+) – Cool 17/3, 2014 at 15:18

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.

Dantzler answered 30/4, 2016 at 14:33 Comment(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

Subdued answered 7/8, 2018 at 14:2 Comment(0)

Recommended topics

Hot tags