views:

464

answers:

3

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.

A: 

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
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
+1  A: 

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.

Quandary
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
A: 

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
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.
OK, thanks for clarifying!
brahn