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.
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.
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.
function myOpenWindow(winURL, winName, winFeatures,
winObj)
{
var theWin; // this will hold our opened
window
// first check to see if the window already
exists
if (winObj != null)
{
// the window has already been
created, but did the user close it?
// if so, then reopen it. Otherwise
make it the active window.
if (!winObj.closed) {
winObj.focus();
return winObj;
}
// otherwise fall through to
the code below to re-open the window
}
// if we get here, then the window hasn’t
been created yet, or it
// was closed by the user.
theWin = window.open(winURL, winName, winFeatures);
return theWin;
}
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 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.
<script>
var gmyWin = null;
</script>
…
<body>
<a href=’javascript:;’
onClick=’javascript:gmyWin=myOpenWindow("https://joemarini.com",
"/", "/",
gmyWin );
return false’>open new window</a>
</body>
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.
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].