HTML / JavaScript Mixed Example 1

Frames, Arrays, Dates, and more

Public Domain

The code examples listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

Overview

HTML and JavaScript that covers: frames, arrays, dates, and more.

What It Does

Note: This page needs to be viewed in frames for this demonstration.

There are two frames, one on the top and one on the bottom. The bottom frame always loads to this page, but the content of the top frame depends on the current month.

The following JavaScript goes between the <head> and </head> tags of the file that defines the frames. For example, we put it in the tutorial_mixed1_frame.html file. After the JavaScript is the frame definition, which goes after the </head> tag in the same file.

JavaScript

<script language="JavaScript">
<!--
var monthLinks = new Array(
"tutorial1_slideshow2.html", // january
"tutorial1_slideshow3.html", // february
"tutorial1_slideshow4.html", // march
"tutorial1_slideshow2.html", // april
"tutorial1_slideshow3.html", // may
"tutorial1_slideshow4.html", // june
"tutorial1_slideshow2.html", // july
"tutorial1_slideshow3.html", // august
"tutorial1_slideshow4.html", // september
"tutorial1_slideshow2.html", // october
"tutorial1_slideshow3.html", // november
"tutorial1_slideshow4.html"  // december
);

var today = new Date();
var month = today.getMonth();

window.onload = gotoPage;

function gotoPage()
{
	window.frames["change"].location.replace(monthLinks[month]);
}

//-->
</script>

Defining the Frames

<frameset rows="25%,75%" frameborder="0" border="0">
<frame src="about:blank" name="change">
<frame src="tutorial_mixed1_main.html" name="main">
</frameset>

How It Works

The first thing that happens in the JavaScript is a new Array is created. Array is an object, and its constructor can take a comma separated list of elements. The first element has an index of 0.

Next, a Date object is created. When it is constructed with no parameters, the Date is set to today's local date and time. So, when the getMonth() method is called, it is retrieving the current month's index (starting at 0 for January).

The onload event is set to the function gotoPage. So, when the contents of the window are done loading, the event is triggered. There is only one line in gotoPage, and it changes the contents of the "change" frame depending on what month it is.

Expected Results

If a blank page loads in the top frame, then the script isn't working. If it is working, one of three pages will load in. The color of the page should match with the month as shown below.

January Blue
February Yellow
MarchGreen
April Blue
May Yellow
June Green
July Blue
August Yellow
September Green
October Blue
November Yellow
December Green

Unexpected Results

Updated: July 24, 2001

To change the page location, overwriting the current history entry, use the location.replace method. This fixes the back button problem. Still refer to the June 09, 2001 update for the "about:blank" suggestion.

Old Way - Example to change the page location, adding a new history entry:
window.frames["change"].location.href = monthLinks[month];

New Way - Example to overwrite history entry:
window.frames["change"].location.replace(monthLinks[month]);

The location.replace method was implemented in Netscape 3.0 and Internet Explorer 4.0. The example on this page has been tested and works in Netscape 3.04, Netscape 4.74, and IE 5.0.

More info:
Netscape location object
Internet Explorer location object

Updated: June 09, 2001 (*July 24, 2001 - the comments here refer to using location.href)

This section [was*] added to cover a few browser issues that came up while testing this page. The major problem is in loading the top frame to a blank page. A solution is to set the src attribute in the frame tag to "about:blank". This way seems to work, but there still are problems [* with location.href]. To test: open this page (framed version) via a link, and hit the browser back button.

Note: all browser information is for the Windows versions.

Netscape 3.04
The first time back is hit, the top frame loads a blank page. Only after the second time does the top frame load the previous page. Of course, Netscape 3 has other unrelated issues. For example, after hitting the browser refresh, most of the pages at this site will get repainted incorrectly, and "disappear". Also, the page does not adjust properly to fit in the width of the window. This occurs in various screen resolutions.

Netscape 4.74
This version of Netscape also has a problem the first time back is hit: Nothing happens. The second time, the top frame loads the previous page.

Internet Explorer 5.0
IE 5 works well and goes back to the previous page the first time.

About this page: