Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects

Tutorial 5

Windows and Frames

Section B - Working with Frames and Other Objects

Go to Other Objects

Tutorial 5B Topics

• Section B - Working with Frames and Other Objects– How to create frames– How to use the TARGET attribute– How to create nested frames– How to format frames– About the NOFRAMES tag– About the Location object– About the History object– About the Navigator object– How to reference frames and windows

Working with Frames & Other Objects

• Creating Frames– Frame

• Independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL

• JavaScript treats each frame in an HTML document as an independent window

• Each frame has its own Window object


• Creating Frames– <frameset> tag

• A frame container • Can only contain <frame> and other

<frameset> tags– Others are ignored

• Do not use <body> tags


• Creating Frames– Frames can be created in rows,

columns or both– <frameset> attributes

• ROWS– Determines number of horizontal frames to

create

• COLS– Determines number of vertical frames to create


• Creating Frames– Frame dimensions

• Can be specified in:– Pixels

» Absolute sizing– Percentages

» Relative sizing» Asterisk (*) designates remainder of visible

window


• Creating Frames– <frame> tag

• Used to specify options for individual frames

– e.g., URLs

• Placed within <frameset> tags• Can be assigned a name using the NAME

attribute, which can be used as a target for a hyperlink


• Creating Frames– Example:

<html><title><head>Frame Example</head></title><frameset rows=“50%, 50%” cols=“50%, 50%”>

<frame src=“FirstURL.html”><frame src=“SecondURL.html”><frame src=“ThirdURL.html”><frame src=“FourthURL.html”>

</frameset></html>


• Using the TARGET attribute– Menu systems

• Popular use of frames• One frame to contain the hypertext links• Second frame to contain selected URLs

– TARGET attribute• Determines in which frame or Web browser window

a URL opens• <base> tag

– Used to specify a default target for all links in a document


• Nesting Frames– Nested frame

• Frame contained within another frame• URLs of frames are loaded in the order in

which each <frame> tag is encountered


• Nesting Frames– Example:

<frameset rows=“50%, 50%” cols=“50%, 50%”><frame src=FirstURL.html”><frameset rows=“50%, 50%” cols=“50%,

50%”><frame src=“FirstURL.html”><frame src=“SecondURL.html”><frame src=“ThirdURL.html”><frame src=“FourthURL.html”></frameset><frame src=“ThirdURL.html”><frame src=“FourthURL.html”>

</frameset>


• Nesting Frames– Example:

<frameset cols=“200, *”><frame src=“InstrumentsList.html”

name=“list”><frameset rows=“75%, *>

<frame src=“Instruments.jpg” name=“picture”>

<frame src=“Welcome.html” name=“description”>

</frameset></frameset>


• Frame Formatting– <frame> attributes

• Several attributes are available to change a frame’s appearance and behavior


• Frame Formatting– Example:

<frameset rows=“20%, *, 20%”><frame src=“header.html” noresize

scrolling=no><frame src=“body.html”><frame src=“navigationbar.html”

noresize scrolling=no></frameset>


• The <noframes> tag– Some older browsers are incompatible with

frames• <noframes> tag displays an alternate message to users

of those browsers

– Example:<frameset rows=“20%, *, 20%”>

<frame src=“header.html” noresize scrolling=no><frame src=“body.html”><frame src=“navigationbar.html” noresize

scrolling=no></frameset><noframes> You cannot view… </noframes>


• The Location Object– Allows you to change to a new web

page from within JavaScript code– Contains several properties and

methods for working with the URL of the document currently open in a Web browser window

Go to First Slide


• The Location Object– When you modify any property of the

Location object, you generate a new URL

– The web browser will then automatically attempt to open that new URL

The Location Object

• Example:location.href = “http://www.ithaca.edu”

• Will cause the browser to open the ithaca home page

The Location Object

• The assign() method is same as the href property:location.assign(“http://www.ithaca.edu”)

Will cause the ithaca home page to be loaded in the browser.

• The reload() method is same as the reload button– If no argument or argument is false then the page is

reloaded only if it has changed– If argument is true then the page will always reload

The Location Object

• The replace() method is similar to the href property:location.replace(“http://www.ithaca.edu”)– Difference: replace actually overwrites one

document with another– Also replaces the old URL entry in the web browser’s

history list.– The href property opens a different document and

adds it to the history list.

The Location Object

• Example:– Redirect.html


• The History Object– Maintains a history list of all the documents

that have been opened during the current Web browser session

– Security features• History object will not display the URLs on the

list• May traverse the history list using

methods/properties• In IE: only allows navigation if page is in same

domain


• The History Object Example:

<input type="text" Name="newURL">

<input type="button" name="goto" value=" Go To "onClick="parent.main.location.href=document.controls.newURL.value;">

<input type="button" name="next" value=" Next URL "conClick="parent.main.history.forward();">

<input type="button" name="previous" value=" Previous URL "conClick="parent.main.history.back();">


• The Navigator Object– Used to obtain information about the

current web browser– Typically used to identify browser


•The Navigator Object–Example:

<script language=“javascript”>document.writeln(“Browser code name: “ + navigator.appCodeName);document.writeln(“Web browser name: “ + navigator. appName);document.writeln(“Web browser version: “ + navigator. appVersion);document.writeln(“Operating platform: “ + navigator. platform);document.writeln(“User agent: “ + navigator. userAgent);

</script>


• The Navigator Object– Shortcut:

with (navigator) {document.writeln(“Browser code name: “ +

appCodeName);document.writeln(“Web browser name: “ +

appName);document.writeln(“Web browser version: “ +

appVersion);document.writeln(“Operating platform: “ +

platform);document.writeln(“User agent: “ + userAgent);

}


• The Navigator Object– testing:

If (navigator. appName == “Microsoft Internet Explorer”) {location.href =

“www.ithaca.edu/jbarr/myIE.html”;}Else

location.href = “www.ithaca.edu/jbarr/myFireFox.html”;


•The Navigator Object–Example:

•NavigatorObjects.html•browserProperties.html


• Referring to Frames and Windows– Frames object

• Includes a frames[ ] array that contains all the frames in a window

– frames[0], frames[1], etc.

– Parent property• Used to refer to a frame within the same frameset

– parent.frames[0], parent.frames[1]

– Top property• Used to refer to the topmost frame in a frameset


• Referring to Frames and Windows– Example:

<frameset rows=“50%, *, 50%”><frame src=“frame1.html”

name=“FirstFrame”><frame src=“frame2.html”

name=“SecondFrame”> </frameset>


• Referring to Frames and Windows– Example: frameReferences.html

<P><INPUT TYPE="button" VALUE=" Get thirdFrame's URL "onClick="alert(parent.frames[2].location.href);"></P>

<P><INPUT TYPE="button" VALUE=" Get the frame set document's URL "onClick="alert(top.location.href);">


• Preventing frames:– Example: BreakoutCheck.html

if (window != top)top.location.href=location.href

– Changes the top window content to be the content of the current window

Documents

Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects