HTML Demo pages: Javascript

Javascript

Here is the pop-up window

The first script instructs the browser to automatically open a new window of a size and with the content you specify. Because the script is in the <head> of the document, the window is loaded automatically when the user accesses the page.

Here is the script that makes it work

This script works because you have defined a javascript function called getPage. A function is a set of javascript statements that perform a task, in this case, finding a new page and opening it into a new window.

The function is defined and named by a keyword, in this case, getPage (note the javascript convention for naming functions). After the name, there is a set of parentheses which are used to enclose the variables which will represent the arguments that will be passed to the function. In this case, there is only one, page. If more than one argument is used, the variables are separated by commas.

The curly braces that follow enclose the set of instructions that the function will perform. In this case, the instructions are to find a variable - page in a specific location. This is represented by the line window.location = page;. Using the dot syntax, this instruction uses a property of the document object model called location.

What follows is a set of instructions that explain what to do when locating the page. The new page is named newWindow and a method is defined, in this case open. The open method requires the following elements:

The URL of the pop-up page, in this case pop.html

A target name which is required but not use din this script, in this case newWin

The attributes the new window will have, in this case width=300,height=400

Note that you have to create an page called pop.html (or whatever name you want to use). This page is a regular HTML page and can contain any content you want. It will be compressed into the dimensions you have set in the script for the pop-up window.

You do have to pay attention to the size of the window (in this case, 400X300 pixels) because the window will not have a scroll bar. If your content is bigger than the window, it can't be seen.

Handling links in the pop-up window

One interesting application of this script is to use the pop-up window for navigation.

To use links in this page, you have to use additional javascript to direct the page into the proper window. Without it, a standard link will call the next page into the pop-up window.

This script takes advantage of the parent-child relationship between pages. The parent page is the original page containing the script that called the pop-up window page. The children will be the new pages that replace the parent page.

If you use the javascript below, you can direct the page into the parent window.

Here is the script that makes it work. It is a two part script, with instructions in the <head> of the pop-up window document and the action in the <body>

This is the part in the <head>:

<script language=javascript type="text/javascript">

</script>

Here is the script that goes in the <body>. It would call four pages and place them into the parent window.

<p>
<a href="javascript:updateParent('page1.html')">Your first page</a>
</p>
<p>
<a href="javascript:updateParent('page2.html')">Your second page</a>
</p>
<p>
<a href="javascript:updateParent('page3.html')">Your third page</a>
</p>
<p>
<a href="javascript:updateParent('page4.html')">Your fourth page</a>
</p>

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu	http://www.slis.indiana.edu/hrosenba/www/Demo/popup.html