Ken Ward's Java Script Tutorial ...

How to write to windows and close them from the file you started with!

Topics on this page:

Writing New Windows
Broken Strings
x+=
Closing window from the page you started with

On my system, a window opens with a close button. when you press the close button the window, as expected, closes. Let's examine the code for this window:

< html >

< head >

<!--

function WindowOpen2()

{

contents= "<h1>This is my window</h1> I like " ;

contents+= "it very much." ;

contents+= "<form><input type='submit' value='Close' " ; contents+= "onclick='window.close(); return false;'></form>" ; Win1=window.open( '' , 'Window1' , 'resizable,height=200,width=200' );

Win1.document.writeln(contents);

}

//-->

</script>

< /head >

< body >

< p >

< a href= "#" onclick= "WindowOpen2();return false" >

Open Window

< /a >

< /body >

< /html >

The Opening Code

The code in the body is:

< a href= "#" onclick= "WindowOpen2();return false" >

Open Window

< /a >

Because we need to use anchor tags to get text to do things, we have put the reference value to '#' and got on with the onClick event to open the function, found in the HEAD, WindowOpen2() .

Code in the Head

The essential part of this code is:

Win1 = window . open ('', 'Window1', 'resizable,height= 200 ,width= 200 ');

This is nearly the same as before, but we have Win1= (Code to open the window.) We are loading all the window loading code into a variable, Win1 (all will be revealed in the next paragraph). But what file (document)? We have used single quotes throughout in this line, so the '' isn't a double quotation mark all on its own, but two single quotes with nothing inside them. Clearly we aren't loading any documents or files here!

We are as before creating a window, but now we aren't loading a file into it. We are writing to the window from this page. We are creating the document from here and loading into the empty window we have opened. The writing bit is the last line of code in the HEAD:

Win1 . document . writeln (contents);

The variable contents has already been loaded with text in the code:

contents =" <h1>This is my window</h1> I like " ;
contents +=" it very much.";
contents +=" <form><input type='submit' value='Close' "; contents +=" onclick=' window . close (); return false;'></form>";

Do you remember how we broke up strings and joined them together using the plus sign with appropriate quotes? ("+") We now we are using another way to do the same thing. Did you notice that funny += combination? It's rather like the != we used in an earlier lesson. Java Script lets us be lazy about typing so:

x=x+1 can be written x+=1;

So instead of writing:

contents=contents + "it very much. ";

We can save typing and write:

contents+="it very much. ";

If you want to write it in the old way, well go ahead. Java Script doesn't mind which!

Closing a window
— either with its own button, or from the start page

The window is closed by using the close button. The code that does the closing is:

window . close (); return false;

Let's open that window again, and then click here. (Make sure it really has closed and it isn't hiding somewhere!)

Our window closes magically from this page. Here's the code:

<a href="#" onclick="closeWindow(win1);return false">

We have called this function, declared in the head of the document:

function closeWindow() {

if ((myWin) && (!myWin.closed))

{

myWin.window.close();

}

}//end of closeWindow()

While win1.window.close() will close an open window, the window we have opened may have been closed by the user, or might not be created. We therefore check whether the window is null ((myWin)) and also whether it exists (!myWin.closed). This checks whether the window exists, because if it exists, it isn't "closed". This function prevents errors occurring should the user have already closed the window from this page, or by closing the new window itself. The close link, therefore, either closes the window, if it is open, or does nothing if it is already closed.

Here is the essential code for this page:

<html>

<head>

<script type="text/javascript">



</script>

<script type="text/javascript">



</script>

</head>

<body vlink="green" alink="blue" link="red" background="backg2.gif">

<p>

<a href="#" onclick="WindowOpen2();return false" id="newwindows" name="newwindows">

Open Window

</a>

</p>

Let's

<a href="#" onclick="WindowOpen2();return false">

open that window

</a>

again, and

then click

<a href="javascript:closeWindow(Win1)">

here.

</a>

(Make sure it really has closed and it isn't hiding somewhere!)

</p>

</body>

</html>

This could be a useful trick to close all windows we have opened when we close the page. See this example !

Go to this example and note that two windows are opened. Press the back button and note that all the windows close. View the source of this example to see how it is done. It doesn't use anything we haven't studied before.

Now what about the first example window we looked at? We haven't looked at how its hyperlinks work, and how it returns the starting page when it exits.

Let's learn this secret now !

[If you need to learn more about HTML visit the HTML Tutorial ]

To ask questions, make comments, etc,

Ken Ward's Java Script Tutorial ...

How to write to windows and close them from the file you started with!

The Opening Code

Code in the Head

Closing a window — either with its own button, or from the start page

Closing a window
— either with its own button, or from the start page