How to determine if a browser window is already open

Article Summary: illustrates a way to determine whether a browser pop-up window is already open using JavaScript. Use this method to prevent an already open browser window from refreshing if the user clicks a link to open the window again – if it is already open, it will just pop to the front.

JavaScript APIs used: window.open

Download the code for this tutorial

I was on a plane to Web Design World in Boston at 37,000 feet when I overheard a woman in the seat in front of me tell her neighbor that she was heading there as well. I mentioned that I was going to be presenting a few sessions at the conference, and when I told her that one of them would be a JavaScript class, she instantly said "Oh, great! I have this JavaScript problem that maybe you could help me with!"

 

After a few moments of discussion, her problem became clear: she had an application where a link on one web page would open up another browser window that contained a series of forms for the user to fill out. The problem was that if the user mistakenly returned to the first window and clicked the link again, then the second window would be refreshed and all of the work the user had done up until that point would be lost. "Is there a way," she asked, "to prevent the second window from refreshing?"

Well, there’s actually an even better solution than that one, which will be the subject of this tutorial. The solution to this problem that we’ll explore is this: if the user returns to the first window and clicks the link to open up the second window again, then the second window should just activate and come to the front if it is already open instead of refreshing. If the user hasn’t yet opened the window, or if they’ve opened it but then closed it for some reason, then clicking the link should re-open it.

Obviously, this requires writing some JavaScript to see if the window has already been opened, and avoiding opening it again.

Using JavaScript to Open A Window

Let’s take a look at the standard JavaScript function that opens a new window. It has the following form:

The function takes three arguments: the URL of the page to be opened in a new window, the name to use for the new window (which is used as a reference for link targets), and the particular features to open the window with, such as its height, width, etc.

However, the window.open function also returns a value, which is an object representing the window that was just opened. You can use this object to see if the window already exists before you try to open it again.

Creating a Wrapper Function

The way we’ll do this is to write our own wrapper function for window.open. We call it a "wrapper" because it is a function that is "wrapped around" the built-in JavaScript function. It performs the same action as the built-in function, but first checks to see if the window that is going to be opened is already open. We’ll call our function myOpenWindow, and the code for it is shown in listing 1.

The myOpenWindow function takes one more parameter than the standard JavaScript function, named winObj, which is optional. This parameter, if it is passed in, contains the value of a variable that holds a reference to the opened window. If it is null, then the window has not yet been opened.

However, if the value of winObj is not null, then the user has opened the window at least once. The code needs to check if the user has closed the window, because it will need to be re-opened if this is the case.

The JavaScript window object provides a property, appropriately named closed, to check for this condition. If the value of the window.closed property is true, then the user has closed the window. Otherwise, it is still open. Our function checks this property, and if the window has not been closed, then it calls the window’s focus method to activate it and bring it to the front of all other browser windows. If the window has been closed, then the code falls through to the part of the function where the JavaScript window.open method gets called, which re-opens the window.

Using the Wrapper Function

Using the wrapper function is very similar to the using the built-in JavaScript function. To use it, create a variable to hold a reference to the window and initialize it to null. Then call myOpenWindow with the variable as the last parameter and then pass the rest of the parameters the same as you would to a call to window.open. Assign the result from myOpenWindow to the variable that will represent the window. A code snippet that uses our newly created function is shown in listing 2.

When the user clicks the link in this sample document to open the window, a new window will be opened. Subsequent clicks on the link will re-activate the already opened window, as long as it stays open. If the user closes the window and then clicks the link, the window wil be re-opened.

Conclusion

By creating a wrapper around the JavaScript window.open() function, we can modify its behavior to suit our own needs while preserving the default behavior in cases where the specialized functionality isn’t needed.

To see a working example, you can download the code for this tutorial by clicking on the link below. Open the file "theopener.html" in a browser and click the link to open the target file. The html page for the the file "theopentarget.html" will open. Switch back to the original page and click the link again. Notice that the window comes back to the front. Close the window and click the link again. The window will re-open.

Download the code for this tutorial

Copyright © Joe Marini. All rights reserved.

For information about how to obtain permission to re-publish this material, please contact us at [email protected].