Click here to Skip to main content
11,409,450 members (54,220 online)
Click here to Skip to main content
Technical Blog

Tagged as

Simple Popup Window Management in JavaScript

, 23 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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 :

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

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

<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)

Share

About the Author

Rion Williams
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.
Follow on   Twitter

Comments and Discussions

 
BugClose window when there is no window Pinmemberbmwz923-Apr-13 3:59 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150414.5 | Last Updated 23 Apr 2013
Article Copyright 2013 by Rion Williams
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid