logo

Managing JavaScript "popup" windows

When you use the JavaScript window.open method to open a new browser window you may experience problems when you try to re-use it.

For example, open the link below and then click back inside this window so that the new one goes behind it.

window.open('/icons/vwicn001.gif', 'SampleWindow1', 'WIDTH=300,HEIGHT=250');

This has opened a new instance of the browser called 'newWindow'.

Now click on the above link again. The link does not open a new window as expected. That is because a window with that name ('newWindow') already exists. The link is actually working, you just can't see it.

This method is fine if your users are wise enough to know that they need to toggle back to the new window using the "task-bar" or similar method. But, most users will end up confused and annoyed after clicking the link a dozen times expecting it to appeat in front of them.

The solution is to use the following customised function in the place of the window.open method that checks to see whether or not a window of that name is already open. If so, then it will call focus on it so that it is returned to the foreground.

Note: It is a good idea to make this function available globally and to then always use it in place of the window.open method (it accepts exactly the same arguments).

function windowOpener(url, name, args) {
if (typeof(popupWin) != "object"){
popupWin = window.open(url,name,args);
} else {
if (!popupWin.closed){
popupWin.location.href = url;
} else {
popupWin = window.open(url, name,args);
}
}
popupWin.focus();
}

Proof of the pudding:

Clink the link below and then return to this window.

windowOpener('/icons/vwicn002.gif', 'SampleWindow2', 'WIDTH=300,HEIGHT=250');

Now click the above link again. It should come back in to view.....

What is the above function doing?

The first thing it does is to see if it has already been run by checking for a variable called 'popupWin'. If it is the first time then this variable is set to an object variable by opening a new window. If the window still exists then its attributes are reset else a new window is opened. The final thing to do is focus on said window.



Note: If you try and use the same function to open another window e.g. like the link below:

windowOpener('/icons/vwicn003.gif', 'SampleWindow3', 'WIDTH=600,HEIGHT=150');

The popupWin object will still be holding reference to the first window so this will get re-used. Not only this but it won't open using the parameters specified in the newer link. If you need to open multiple different windows then use this function instead:

popupWins = new Array();

function windowOpener(url, name, args) {
/*******************************
the popupWins array stores an object reference for
each separate window that is called, based upon
the name attribute that is supplied as an argument
*******************************/
if ( typeof( popupWins[name] ) != "object" ){
popupWins[name] = window.open(url,name,args);
} else {
if (!popupWins[name].closed){
popupWins[name].location.href = url;
} else {
popupWins[name] = window.open(url, name,args);
}
}

popupWins[name].focus();
}


The popupWins array is defined outside the function, making it global. This is done so that it doesn't get redefined each time the function is called, losing references to previous windows.

Feedback

    • avatar
    • Glen McKnight
    • Tue 21 Aug 2001

    Closing Windows

    Is there a way to automaticly close a pop up window or any window for that matter after a period of time?

    1. Re: Closing Windows

      Try this link for closing windows using a timer. http://javascript.internet.com/navigation/close-window.html

      Show the rest of this thread

  1. Not the same a window.open

    these functions are not quite the same as window.open. window.open returns a handle to the window. To make these funtions the same you need to add the following line at the end of the function; "return popupWins;" to the first function, or "return popupWins[name];" to the second.

    Otherwise i love it!

  2. simplified windowOpener()

    First windowOpener() can be simplified with the same functionality as follows:

    function windowOpener(url, name, args) {

    if(typeof(popupWin) != "object" || popupWin.closed) { popupWin = window.open(url,name,args); } else { popupWin.location.href = url; }

    popupWin.focus(); }

  3. Controlling the menbars of popup windows

    Hi, I'm utilizing your script very successfully (see http://www.arttoharmony.com/MysticalReflections.htm). When the popup windows popup, we would like to take away all menu bar and other capability from it, as we don't want anyone taking my aunt's pictures. I saw some other code that does this, but I don't know how to apend your code to do that. Can anyone help, please?

    many thanks!

    Gary

    __________ this is the kind of stuff I want to add: onClick="window.open('myimage.gif', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no,

      • avatar
      • Franz
      • Tue 9 Oct 2007

      Another - much easier way:

      If you want to reuse a window and make sure it is not in the background after changing the content, just call .focus() on it.

      Example: popup = window.open("someURL.html", "myPopup"); popup.focus();

  4. Re: Managing Javascript "pop up" windows

    I'm a newbie to Javascript, and have got the code shown here to work okay if I click the link, view the picture and then select the 'close window' link that I have provided. So far, so good.

    However, the pictures I need to display are all different sizes, so I would still want the focus to return to the pop up window (if it's been left open), but I want it re-sized to match the size that I specify in the javascript link for each picture.

    The code here fails to reize the window to match the specified size (width, height) of the new graphic.

    Any ideas?

      • avatar
      • Jake
      • Mon 10 May 2004

      Re: Managing Javascript "pop up" windows

      Richard,

      Try setting the width and height property of popupWin after you've opened the new page in it. i.e:

      popupWin.open(...); popupWin.width=XXX; popupWin.height=XXX;

      HTH Jake

      Show the rest of this thread

      • avatar
      • shu
      • Thu 23 Nov 2006

      Re: Managing Javascript

      function windowOpener(url, name, args) { if (typeof(popupWin) != "object"){ popupWin = window.open(url,name,args); } else { if (!popupWin.closed){ popupWin.location.href = url;

      } else { popupWin = window.open(url, name,args); } } popupWin.focus(); }

      // called from html - closes popup then reopens with new args function popWindow1() { if (typeof(popupWin) == "object") popupWin.close() windowOpener(url1, name1, args1) }

      // called from html - closes popup then reopens with new args function popWindow2() { if (typeof(popupWin) == "object") popupWin.close() windowOpener(url2, name2, args2) }

  5. Question? window.close()

    I am using the following code to open a form within a LS agent to open a second window.

    Print "<Script Language='JavaScript'>" Print "window.open('storeform?OpenForm')" Print "setTimeout(window.close, 1000)" Print "</Script>"

    When I close the first window the user is prompted that the code is closing the window. Is there a way from having this prompt show up for the user?

    Thanks for any help offered!!!!

      • avatar
      • Jake
      • Fri 23 Jul 2004

      Re: Question? window.close()

      Which window are you trying to close? The one you opened or the one that opened it?

      You can only close windows with JavaScript if they were created/opened/spawned by JavaScript in the first place.

      So, the one you open can be closed but the one underneath can't. If you want to close the window you opened you need to give it a name to refer to it by. See main article for how.

      Show the rest of this thread

  6. Bookmarks

    windowOpener function will not jump to bookmarks on popup window. Is there a way to avoid this?

  7. Java window open help

    Sure hope you or someone can help me. Using IE6 and the latest Java, I can't get any window to open up when I click on the link on numerous sites, including the code you have in this article. The Status Bar just says Error on Page. I think it's a Java problem, but I installed an older (v1.2) Java, and it wasn't fixed. Occasionally, a window will open, but it has to be a regular html page, and not Java. Though, sometimes, the regular pages won't open either. Sorry if this is off topic, but I have been searching for weeks, and I can't find anyone who knows what's going on. Please help.

      • avatar
      • bofur
      • Wed 13 Oct 2004

      Re: Java window open help

      I'll answer my own question. Don't know if anyone cares, but the problem was with Windows Service Pack 2, and it was solved when I uninstalled it.

      Show the rest of this thread

  8. undesired refresh

    Although the code brings focus to the desired window...it is also refreshing the window and causing me to lose any information that I had in the fields. Is there a way to stop it from refreshing?

    1. My solution to undesired refresh

      What I have done to avoid the undesired refresh:

      function windowOpener(url, name, args) { if(typeof(popupWin) != "object" || popupWin.closed) { popupWin = window.open(url,name,args); } else { if (name!=popupWin.name){ popupWin.close(); popupWin = window.open(url,name,args); } } popupWin.focus(); return popupWin; }

  9. Dead object window

    after clicking on a link using javascript to set the size and parameters of my new window, I get a new window opening that THEN spawns the correct window with the appropriate page loaded. But the other window just says open (it has the word "object" in it, but nothing else, and the url for that page is my javascript). What am I doing wrong?

      • avatar
      • Jake Howlett
      • Fri 8 Apr 2005

      Re: Dead object window

      Sounds like you need to wrap all your code inside a void operator. Like so:

      JavaScript:void(code)

  10. How to make the popup window as modal

    when the popup window is opened it is possible to return to the parent window

    How to return to the parent window only after closing the popup window

    we should not perform other operations unless it is closed

    please reply me to the mail id

    1. Re: How to make the popup window as modal

      Plz let me also know the solution

      Show the rest of this thread

  11. finding root of my application on the server

    i want to know about relative url in javascript . i want to open a new window . my current url is : http://1and2/test/test2/default.aspx

    and i want to open this url : http://1and2/test/test3/index.html

    location.host returns 1and2 . and i dont know in which directory my application is running on the server . ( /test or /test/test3 or something else ) how can i find the root of my application url in javascript ?

    • avatar
    • David
    • Wed 5 Oct 2005

    Append windowOpener with code to Center Pop Up

    Thanks for the great script. It works beautifully. The only change that I would like is to append the code to automatically "center" the Pop Up window according to the size of the users resolution.

    Does anyone know how to append the code to do this?

    Thank you. Thank you. Thank you!

  12. Feedback

    Hey Jake, thats wonderful, terrific and amazing, Its really cool and very useful

    • avatar
    • bibin
    • Fri 14 Dec 2007

    not working in Safari

    But this code is not working in safari. the the child window is not getting the focus when i click on the link

      • avatar
      • lat
      • Mon 18 Oct 2010

      safari have a hidden error and stopping the focus and resize function after window is opened and if you use your mouse to pull it bigger it make a jump to what you have set it to try it your self but no solution to that problem and it is safari there have to make that error.

      You can do it in safari but you have to set the width and the height when you make the window in safari and not after you have made the window.

      <script language="javaScript" type="text/javascript"><!--

      var up=true;

      function MiniRadio(content){

      if(up){

      name= window.open("+content+","name", config='toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=0, copyhistory=0, left=0, top=0, width=312, height=220');

      name.moveTo(0,0);

      up=false;

      }else{

      if(false==name.closed){

      name.close();

      up=true;

      }else{

      name= window.open("+content+","name", config='toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=0, copyhistory=0, left=0, top=0, width=312, height=220');

      name.moveTo(0,0);

      up=false;

      }

      }

      }

      //--></script>

      this script open a window then you click on the link there you have to use it and then you click again it closes the window or if you have refreshed the main window after you have made the window it will only refresh the window and you have to click again to close the window.

  13. launching window.open from a client

    Hi Jake,

    I was wondering if you could help. I have a bit of code that sends an email to a notes client with a hotspot link that contains a window.open : eg. javascript:window.open("whatever.nsf/...editdocument","","toolbar=no")

    For some reason, the parameter for hiding the toolbar is ignored (or any other parameter i decide to use).

    Any help would be much appreciated.

  14. Managing JavaScript "popup" windows is very useful.

    It's working for me for all browsers.

    Thanks,

    Parthu

  15. Hi Jake, I have a need to open multiple windows in my JS where a foreach loop is used for opening multiple html documents. However, when the windowOpener function is called in this way only a single window is opened, even though I provide a name parameter with unique names for each window. The single window contains all of the documents that can be displayed by hitting the backpage key on the browser, but what I really want is to display each document in a separate window. Any thoughts on this? Thanks.

      • avatar
      • Jake Howlett
      • Thu 11 Feb 2010

      Hi Bob,

      This article is getting on for 10 years old now. Things have changed and I don't know what the best practice is now for opening multiple windows. Times have changed and any JS that try to open windows using a for loop might well be blocked by modern browsers trying to prevent any malware/virus or malicious script kiddies etc.

      Jake

    • avatar
    • Gourav
    • Thu 12 Aug 2010

    This does not seam to work in chrome :-( ..

      • avatar
      • LAT
      • Mon 18 Oct 2010

      Nothing is working in Chrome loser browser from Google. And if you get it to work in google it dosent work ind the other browser, ironic. my solution is make a html document for each browser. Not a solution, but it works.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Create a "Login" anchor link   Date validation on global servers

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: Focus; Blur; Window; Open;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »