Tutorial 5: Windows and Frames

• Section A: Working with Windows
  • The JavaScript Object Model
    • Browser Object Model
  • Window Object
    • Window Object Methods
    • Window Object Properties
    • Window Object Events
    • Opening and Closing Windows
    • Window object: setTimeout, clearTimeout and setInterval and clearInterval methods
  • Document Object
    • Document Object Methods
    • Document Object Properties
    • Document Object Events
• Section B: Working with Frames and Other Objects
  • Frames
  • Location Object
    • Location Object Methods
    • Location Object Properties
  • History Object
    • History Object Methods
    • History Object Properties
  • Navigatior Object
    • Navigator Object Methods
    • Navigator Object Properties

Section A: Working with Windows

The JavaScript Object Model

To control the Web browser window or the HTML document, you use the browser object model. The browser object model is a hierarchy of objects, each of which provides programmatic access to a different aspect of an HTML page or the Web browser window. You can use methods and properties of objects in the browser object model to manipulate the window, frames, and HTML elements displayed in a Web browser. You do not have to explicitly create any of the objects or arrays in the browser object model; they are create automatically when a Web browser opens an HTML document. The most common objects in the browser object model are displayed in the figure Browser Object Model.

Some of the JavaScript objects listed in the Browser Object Model figure represent arrays that contain other objects. In the figure, those objects that are arrays are followed by brackets, such as Form[], or Image[]. The contents of these array objects are created from the elements in an HTML document. For example, the Image object contains an images[] array that lists all the <IMG> tags in an HTML document.

To refer to a JavaScript object in code, you must refer to all of its ancestors as a series of properties separated by periods. For example, document.myImage.src, or document.myForm.myTextBox.value. When listing an object's ancestors, it is not necessary to include the Window object. The Web browser automatically assumes that you are always referring to the currently displayed window, which is the top-level object in the browser object model. It is also not necessary to include the Document object when listing an object's ancestors for Internet Explorer 4 and later and Netscape 6 and later. For example, myImage.src, or myForm.myText.value. In some cases, it is necessary to include the Window object when you need to clearly distinguish between the Window object and the Document object. For example, event-handling code automatically assumes you are referring to the Document object instead of the Window object. Therefore, in event-handling code you should include the Window object when you are explicitly referring to the Web browser window. 

    Example: Tutorial5Ex1.html

Window Object

The Window object is the top-level object in the browser object model. The Window object represents a Web browser window or an individual frame within a window. The Web browser automatically creates the Window object, and you use its properties and methods to control the Web browser window. For example, the focus() method of the Window object allows you to programmatically select which window to display as the topmost window.

Another way of referring to the Window object is by using the self property. The self property refers to the current Window object. Using the self property is identical to using the window property to refer to the Window object.

The Window object includes several properties that contain information about the Web browser window. For example, the status property contains information displayed in a Web browser's status bar. Also contained in the Window object are various methods that allow you to manipulate the Web browser window itself. 

Netscape and Internet Explorer each have custom properties and methods for the Window object. You can find a cross-reference of Window object properties and methods at http://devedge.netscape.com/library/xref/2002/client-data/ for both browsers. Also, see http://developer.netscape.com/docs/manuals/communicator/jsref/contents.htm - Netscape JavaScript Reference.

Opening and Closing Windows

Netscape and Internet Explorer both allow you to open new Web browser windows in addition to the Web browser window that already be open. Whenever a new Web browser window is opened, a new Window object is created to represent the new window. The syntax for the open() method is
window.open("URL", "name", options);
The URL argument represents the Web address or filename to be opened. The name argument is used to assign a value to the name property of the new Window object. The options argument represents a string that allows you to customize the new Web browser window's appearance. If you exclude the URL argument, then a blank Web page opens. You can include all or none of the open() method argument. If the name argument of the open() method is already in use by another browser window, then JavaScript changes focus to the existing Web browser window instead of creating a new window. 

If you exclude the options string of the open() method, then all the standard options will be included in the new Web browser window. However, if you include the options string, you must include all the components you want to create for the new window, that is, the new window is created with only the components you explicitly specify. When including multiple items in the options string, you must separate the items by commas. If you include space in the options string of an open() method, the options may not display properly in Netscape.

A Window object's name property can be used only to specify a target window with hypertext links or forms, and can not be used in JavaScript code. If you want to control the new window using JavaScript code located within the Web browser in which it was created, then you must assign the new Window object created with open() method to a variable. Example:
newWindow = window.open("http://www.netscape.com");

To set the focus to the mew window: newWindow.focus();
To close the new window: newWindow.close();
To close the window by itself: window.close(); or self.close();

Window object: setTimeout, clearTimeout and setInterval and clearInterval methods

The setTimeout() method of the Window object is used in JavaScript to execute code after a specific amount of time has elapsed. Code executed with the set setTimeout() method executes only once. Syntax:
setTimeout_variable = setTimeout("code", milliseconds);

The clearTimeout() method of the Window object is used to cancel a setTimeout() method before its code executes. The clearTimeout() method receives a single argument, which is the variable that represents a setTimeout() method call. Syntax:
clearTimeout(setTimeout_variable);

The setInterval() method repeatedly executes the same code after being called only once. Syntax:
setInterval_variable = setInterval("code", milliseconds);

The clearInterval() method is used to cancel a setInterval() method before its code executes. Syntax:
clearInterval(setInterval_variable);

    Example: Tutorial5Ex1.html

Document Object

The Document object that represents the HTML document displayed in a window. The Document object descends from a Window object. The write() and writeln() methods, with which you are familiar, refer to the Document object. All HTML elements exist within an HTML document represented by the Document object, and each element is represented in JavaScript by its own object. Therefore, the Document object is the parent or ancestor object for all the elements you create on an HTML page.

    Example: Tutorial5Ex1.html

Section B: Working with Frames and Other Objects

Frames

Goto http://www.geocities.com/doan_1/HTMLEducation/Inclusion.htm#FramesetElement to learn about Frames.

Location Object

The location object allows you to change to a new Web page from withing the JavaScript.

location.assign(url); loads the new url into the current window. Same as location.href = "url";

location.reload(true); forces the current page to reload

location.reload(false); or location.reload(); , then the Web page reloads only if it has changed.

location.replace(url); actually overwrites one document with another and replaces the old URL entry in the Web browser's history list, a list of all the documents that have been opened duting the current browser session, with the new url. In contrast, the href property opens a different document and adds it to the history list.

location.href = "url"; loads the new url into the current window. Same as location.assign(url);

    Example: Tutorial5Ex1.html

History Object

The history object maintains a history list of all the documents that have been opened during the current Web browser session. Each Web browser window and frame, regardless of how many windows and frames you have open, contains its own internal History object.

    Example: Tutorial5Ex1.html

Navigator Object

The navigator object is used to obtain information about the current Web browser. Due to the incompatibilities between Internat Explorer and Netscape, it is important to be able to distinguish which browser is running in order to execute the correct code for a specific browser.

    Example: Tutorial5Ex1.html