Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / Javascript
Technical Blog

Simple Popup Window Management in JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
23 Apr 2013CPOL1 min read 27.1K   4   1
How to easily open and close them all from the page that spawned them.

Based on a question that I received earlier this week on closing windows within a page that were opened through the window.open() function in JavaScript, I thought I would throw together a very quick example demonstrating how to easily open and close them all from the page that spawned them.

The Problem

You spawned a rogue window through JavaScript and you want to close it from the page that spawned it (or you want it to go away when you leave the page as well).

The Solution

The simplest method of handling this issue is to have a single variable within your JavaScript code keep track of the window that you opened and dispose of it properly. So we will add a variable that will store our value (windowOpened) and our necessary functionality to open and close the window :

JavaScript
<script type='text/javascript'>
     //Stores our opened window
     var windowOpened;

     //Opens our Window
     function openWindow() {
         windowOpened = window.open("http://www.microsoft.com", 
                            "ChildWindow", "height=600,width=300");
     }
     //Closes the window
     function closeWindow() {
         windowOpened.close();
     }
</script>

That’s basically it. So to see it in action, we would just need to wire up two buttons to handle showing and hiding the window :

XML
<input type='button' value='Create Popup' onclick='openWindow();' />
<input type='button' value='Close Popup' onclick='closeWindow();' />

No Child Left Behind

If you wanted to ensure that you didn’t leave a poor orphaned popup window all by its lonesome if the parent page navigated elsewhere, you would just need to add the closeWindow() function to the onunload event from the body element of your parent page :

XML
<body onunload='closeWindow();'>

You can find a full working example of this post available here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
An experienced Software Developer and Graphic Designer with an extensive knowledge of object-oriented programming, software architecture, design methodologies and database design principles. Specializing in Microsoft Technologies and focused on leveraging a strong technical background and a creative skill-set to create meaningful and successful applications.

Well versed in all aspects of the software development life-cycle and passionate about embracing emerging development technologies and standards, building intuitive interfaces and providing clean, maintainable solutions for even the most complex of problems.

Comments and Discussions

 
BugClose window when there is no window Pin
bmwz923-Apr-13 2:59
bmwz923-Apr-13 2:59 
When you try to close window when there is no window object windowOpened will be undefined so you can add if check
Mohamed Abbas
BMW

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.