Previous Page
Next Page

Closing a Window

Just as you can create windows, you should know how to get rid of windows by closing them. In Script 6.10, the parent window has "open" and "close" links that create and close the child window, and each link has a unique id that we use in the script. The external JavaScript is in Script 6.11.

Script 6.10. Note the id tags for the two links in this HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Window Test</title>
     <script language="Javascript"  type="text/javascript"  src="script07.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <div align="center">
        <h1>Let's play with windows!</h1>
        <h3>
            <a href="#" id="openWin">Open a new window</a>&nbsp;&nbsp;
            <a href="#" id="closeWin">Close the window</a>
        </h3>
     </div>
</body>
</html>

Script 6.11. This script opens and closes a child window.

var newWindow = null;
window.onload = newWinLinks;

function newWinLinks() {
     for (var i=0; i<document.links.length; i++) {
        document.links[i].onclick = chgWindowState;
     }
}

function windowOpen() {
     if (newWindow && !newWindow.closed) {
         return true;

     }
     return false;
}
function chgWindowState() {
     if (this.id == "closeWin") {
        if (windowOpen()) {
           newWindow.close();

        }
        else {
           alert("The window isn't open");
        }
     }
     if (this.id == "openWin") {
        if (windowOpen()) {
            alert("The window is already open!");

        }
        else {
           newWindow = window.open("","newWin", "toolbar,location=yes,width=300, height=200");

        }
     }
     return false;
}

To close a window:

1. 
var newWindow = null;



This line initializes the value for the newWindow object that we're going to use later. While most browsers do this automatically, some don't, so it needs to be set here to avoid errors later.

2. 
document.links[i].onclick = chgWindowState;



In the newWinLinks() function, we're stepping through the links in the document as usual. The only difference here is that we'll call chgWindowState() if we detect a click on one of the links.

2. 
function windowOpen() {
  if (newWindow && !newWindow. closed) {
     return true;
  }
  return false;
}



The if statement poses a logical test using the && operator, which returns a true result only if the values on both sides of it are true. So in this case, newWindow must exist and newWindow must not have been closed (the ! is the logical "not" operator). This function returns TRue if a window is open and false if it isn't.

4. 
function chgWindowState() {
  if (this.id == "closeWin") {



Here, we're checking to see if the id of the clicked link is closeWin. If it's closeWin, the user clicked the close link. If it's openWin, they clicked the open link.

5. 
if (windowOpen()) {
  newWindow.close();
}



If the user clicked close and the window is open, these lines close it.

6. 
else {
  alert("The window isn't open");
}



If the user clicked close and the window's already closed, an alert pops up saying so.

7. 
if (this.id == "openWin") {
  if (windowOpen()) {
     alert("The window is already open!");
  }



Similarly, if the user clicked open and the window is already open, an alert pops up saying so.

8. 
else {
  newWindow = window.open("", "newWin","toolbar,location=yes, width=300,height=200");
}



If the user clicked open and there's no current window, the window opens up, showing the parameters set in the line (Figure 6.11). In this case, the toolbar and location are visible.

Figure 6.11. The links in this window create and close a child window.

[View full size image]


9. 
return false;



We end with a return false so that the HRef doesn't get triggered.


Previous Page
Next Page