Click on the following button and see what happens!
In my browser, I get a menu. This is called a control in computer-speak, because the open window can open other sites while staying in existence itself. Drag the control menu over to where you want it, and resize this window so you can view both. And click on some links. The links appear in this window. There is also a close button. Click the close button and the window closes, as expected. This page is then reloaded. I think this is a very neat and useful technique!
Click on the link below and see what this one does:
On my system, a window opens and displays some text. If you try to resize the window, it lets you resize it. If you press the X on the menu bar, it closes. What a charming little window it is!
Let's examine the code for this window:
< html>< head><script language= "javascript"><!-- function WindowOpen1(){ window.open( 'win0.htm', 'Window1', 'resizable,height=130,width=130');} //--> </script> < /head>< body>< p>< a href="#" onclick="WindowOpen1();return false">Open Window < /a>< /p>< /body>< /html> |
The code in the body is:
<
a href="#" onclick="WindowOpen1();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, WindowOpen1(), found in the HEAD.
Instead of using the hash sign, we could have written:
<
a href="javascript:void(WindowOpen1())">Open Window
<
/a>
The essential part of this code is for WindowOpen1() in the HEAD of the file is:
window.open(
'win0.htm', 'Window1','resizable,height=130,width=130');
The file 'win0.htm' is the one we load into our window, and the properties, we have used - separated by commas - are shown in single quotes (we could have used double quotes, had we wanted to). The window's name, for JavaScript purposes is 'Window1'. It's real name (the name of the file), is win0.htm and is an actual existing file. Note that the name must be one word. Our window is resizable, and has a height of 130 and a width of 130 too. You might say it is rather square. But you can put other sizes into your window.
By the way, I called my function WindowOpen1() because WindowOpen is a special word used by Java Script. If I call my function WindowOpen, Java Script will get jealous because this is one of its words. However, if I add the 1, then it doesn't know any different and I am all right. There are a few reserved words in Java Script and we aren't allowed to use them for our functions and variables. These words include location, write, return, false, true, etc.
Back to this script!
We could have had more or less properties if we wanted. Some of the properties you can use are shown below:
If we do not specify a property, then we don't get it! If we just put the property name in, as we did with resizable, then we get it (even though we didn't put resizable="yes") Why not put in some more properties and see what happens! Don't forget, you can use "top" and "left" to position your new window.
Let's open some more windows, and do some writing!