Học JavaScript qua ví dụ part 34 ppt

The file that defines the layout of the frames is called the parent window, and each of the frames it describes is called a child see Figure 10.24.. In Example 10.14 the window is divide

Trang 1

When you look out the window in the room where you might be at the moment, it might

be one big pane of glass like a picture window, or the window might be divided up into

panes of squares or rectangles

The browser is a virtual window that can be divided up into frames—independent

windows, like panes, within the main window, where each frame is used to display

dif-ferent information Invented by Netscape, frames allow you to display more than one

Web page in the same window Web designers have debated the merit of using frames

because they are often misused but have some distinct disadvantages discussed later in

this chapter

The file that defines the layout of the frames is called the parent window, and each of

the frames it describes is called a child (see Figure 10.24) Although you can’t see the

parent window, it will show up in the browser’s source for the page

To build frames in a Web page, you use the HTML <frameset> tags instead of the

<body> tags (see Table 10.10) At least three files are needed to create frames The first

file defines the layout of the frames (or subwindows) by defining the size and position

Figure 10.23 This is the scene that will be scrolling by in the small window above.

Figure 10.24 The parent window is divided into child frames.

Parent or Top Window

Child

Frame

Child Frame

Child

Frame

Child Frame

Trang 2

of the frames The rows and cols attributes of each frameset specify how much room the

frame will need within the window These values use exact pixels as a default, although

you can also use percentages to represent a section of the window, or an asterisk * to

allocate leftover space (These size values will be shown in Examples 10.15 and 10.16.)

Creating HTML Frames. In Example 10.14 the window is divided into two frames:

a left frame that takes up 25 percent (in columns) of the window and a right frame that

takes up 75 percent (in columns) of the rest of the window Because files are required to

accomplish this, the main file defines the frameset, the second file contains the HTML

code for the left frame, and the third file contains the HTML code for the right frame

Table 10.10 HTML Frame Tags

border Sets frame border thickness (in pixels) between all the

frames.

frameborder Draws 3D separators between frames in a frameset A

value of 1 or yes turns frame borders on; a value of 0 or no

turns them off.

E X A M P L E 1 0 1 4

<html>

<head><title>Frame Me!</title></head>

<! Creating the framesets for two files >

<! This file is named: framesets.html >

1 <frameset cols="25%,75%">

2 <frame src="leftframe.html" >

3 <frame src="rightframe.html" >

4 </frameset>

</html>

Trang 3

-<html>

<head><title>Left Frame</title></head>

<! This file is named: leftframe.html >

5 <body bgColor="yellow">

<h2>

6 Just to show you that this is the left frame

</h2>

</body>

</html>

-<html>

<head><title>Right Frame</title></head>

7 <! This file is named: rightframe.html >

8 <body bgColor="lightgreen">

<h2>

Just to show you that this is the right frame

</h2>

</body>

</html>

E X P L A N A T I O N

1 This is the parent file that defines how the window will be divided into frames

The first frame will take up 25 percent of the page in columns and the second

frame will take up the rest of the page, 75 percent

2 The frame src attribute is assigned the URL of the first HTML file, leftframe.html,

that will be displayed in the window

3 The frame src attribute is assigned the URL of the second HTML, rightframe.html,

that will be displayed in the window

4 The frameset definition ends with the </frameset> tag.

5 The background color of the left frame will be yellow

6 This text appears in the left frame

7 This section represents the right frame

8 The background color of this frame is light green See Figure 10.25

E X A M P L E 1 0 1 4 (C O N T I N U E D)

75%

25%

Trang 4

The next example shows a window partitioned into three horizontal frames

Figure 10.25 Two vertically positioned frames: Output from Example 10.14.

E X A M P L E 1 0 1 5

<html>

<! This file simply defines the frames; it points to other

HTML files (not shown) that comprise the HTML content >

1 <frameset rows="130,*,*" frameborder="yes"

border="1" framespacing="0">

2 <frame src="topframe.html" >

3 <frame src="main.html" scrolling="no">

<! main.html is the middle frame >

4 </frameset>

</html>

1 This time the frameset will be divided up into three sections by rows The first

frame will be a horizontal frame consisting of 130 pixels in a row Based on the

amount of space taken up by the first frame, the remaining frames will be

allocat-ed whatever space is left in the window There are three frames that will be placallocat-ed

horizontally on the page (see Figure 10.26)

130 pixels in rows topframe.html

main.html

bottomframe.html

Trang 5

The frame Object. HTML frames in JavaScript are represented as an array of frame

objects The frames[] array is a property of the window object and is referenced with the

window’s parent property Each element of the array represents a frame in the order in

which it appears in the document; thus, window.parent.frames[0] would reference the

first frame defined in a frameset (see Figure 10.27) If you name the frame, then you can

reference the frame element by its name If the frame is named leftframe, it can be

refer-enced as window.parent.leftframe.

2 This is the URL to the first frame, topframe.html, which will be at the top of the

window

3 This is the URL to the second frame, main.html, which will be in the middle of the

window

4 This is the URL to the third frame, bottomframe.html, which will be at the bottom

of the window

Figure 10.26 Three horizontal frames created in Example 10.15.

Figure 10.27 The JavaScript hierarchy.

E X P L A N A T I O N (C O N T I N U E D)

parent

Window object

Trang 6

Because frames are just little windows, they share many of the same properties and

methods of the window object See Table 10.11 for a list of properties and Table 10.12

for a list of methods

Creating Menus and Navigation Bars. Because frames can be used to divide a

page, it is common to use one of the frames as a menu of items and the other as the main

page where a page is loaded depending on the user’s selection If one frame contains a

Table 10.11 Properties of the frame Object

Property What It Describes

document The document currently loaded in the frame.

length The number of elements in the frames array; that is, the number of frames.

name The name of the frame assigned to the HTML name attribute.

parent The main window from which the child frames are defined.

top The window that started the script.

Table 10.12 Methods of the frame Object

Method What It Does

clearInterval() Clears a timed interval

clearTimeout() Clears a timeout.

print() Invokes a print dialog box

setInterval() Sets a timed interval

setTimeout() Sets a timeout

watch() Sets a watchpoint on a frame property; if a property changes, calls a function.

Trang 7

selection of links, then it can serve as a navigation bar When the user clicks a link, the

page at that URL will be loaded into the main frame

In Example 10.16 the frames are defined for two frames Example 10.17 displays the

content of the two frame files The left frame will represent a menu of links The

back-ground color in the right frame will change when the user clicks a link in the left frame

E X A M P L E 1 0 1 6

<html>

<! Creating the framesets for two frames >

<! This HTML file is named: framedef.html >

1 <frameset cols="25%,75%">

2 <frame src="leftmenu.html" name=lframe>

3 <frame src="rightcolor.html" name=rframe>

4 </frameset>

</html>

1 The HTML <frameset> tag replaces the <body> tag when working with frames The

size is determined by the ROWS and COLS attributes of the <frameset> tag In this

example, the first frame will occupy 25 percent of the window, and the second

frame will occupy 75 percent of the window (in columns) The default is to set

ROWS and COLS in pixels (ROWS and COLS are not case sensitive.)

2 The first frame, named lframe occupies 25 percent of the left side of the window

Its content is in an src file called leftmenu.html.

3 This frame, called rframe, occupies 75 percent of the right side of the window Its

content is in an src file called rightcolor.html.

4 The HTML </frameset> tag ends the definition of the frames.

E X A M P L E 1 0 1 7

<html>

<head><title>Left Frame</title>

<! This HTML file is named: leftmenu.html >

<script type="text/javascript">

1 function setBgColor(color){

2 parent.frames[1].document.bgColor=color;

// Or use the frame’s name: parent.rframe.document.bgColor

}

</script>

</head>

Continues

Trang 8

Using the top Property to Keep the Main Window Out of a Frame. When the

user loads your Web page into his or her browser, he or she may load it into a frame

rather than in the main window You might not want this, as framesets create states in

the browser that are not addressable For example the user might not be able to

book-mark your page or reference it with the current URL once the frame content changes

See more on this at http://htmlhelp.com/faq/html/frames.html#frame-problems You can

use the location method to force your page to load in the main window by putting the

<h3>

Pick a color:

<br />

3 <a href="JavaScript:setBgColor('red')">red</a>

<br />

<a href="JavaScript:setBgColor('yellow')">yellow</a>

<br />

<a href="JavaScript:setBgColor('green')">green</a>

<br />

<a href="JavaScript:setBgColor('blue')">blue</a>

</h3>

</body>

</html>

-<html>

<head><title>Right Frame</title></head>

<body>

<h2>

This is the frame where colors are changing.<br />

In your JavaScript function, this is frame[1].

</h2>

</body>

</html>

1 A function called setBgColor() is defined It takes one parameter, a reference to a

color being passed by the user

2 Going down the document tree, start with the parent window, to the second

frame, frames[1] (remember array subscripts start at 0), to the frame’s document,

and then the document’s property, bgColor Assign a color This assignment will

cause the background color in the right frame to change

3 When the user clicks any of the following links, the JavaScript function

setBgCol-or() will be called, with the color sent as an argument to the function The

Java-Script: pseudo URL prevents the link from going to a real URL The display is

shown in Figure 10.28 on page 311

Trang 9

JavaScript code shown in Example 10.18 into the <head> portion of the page Every

win-dow and frame has a top property, a reference to the topmost winwin-dow object currently

loaded in the browser

Figure 10.28 When the user clicks a link in the left frame, the background color in

the right frame changes: Output from Example 10.17.

E X A M P L E 1 0 1 8

<html>

<head><title>Forcing the Frame</title>

1 if (window != top) { // True if window is not the top

// window in the hierarchy

// Put this window on top

}

</script>

3 <body bgcolor="lightblue">

<h1>

The important page that we're talking about

</h1>

</body>

</html>

1 If the current window is not at the top of the window hierarchy in the browser,

the statement in the block is evaluated The top property references the highest

object in the window hierarchy

Continues

Trang 10

Collapsing Toolbars and Menu Bars. You don’t always necessarily want to look at

the toolbar or menu bar It can be in the way of what you’re viewing in the main page

Example 10.19 collapses the frame to bring the main frame to the foreground so that it

will be viewed in the entire window

2 If the current window isn’t at the top of the window hierarchy (if it’s not the main

window), this assignment forces the page, location.href, into the main window,

top.location.href.

3 This is the body of the fictitious page that will be loaded into the main window of

whoever views it

E X A M P L E 1 0 1 9

<html>

<head>

<title>Untitled Document</title>

content="text/html; charset=iso-8859-1">

</head>

<frame src="toctoolbar.html" name="menu">

<frame src="tocmain.html" name="main">

</frameset>

Your browser needs to support frames to view this page

</body>

</noframes>

</html>

-(The Startup Main Page)

<html>

<head>

<title>Untitled Document</title>

charset=iso-8859-1">

</head>

</body>

</html>

-(The Menu Bar Page)

<html>

<head>

E X P L A N A T I O N (C O N T I N U E D)

Trang 11

charset=iso-8859-1">

var myUrl;

}

if ( ! myUrl){

5 parent.location = "tocmain.html";}

else{

// parent location

} }

</script>

</head>

7 <p><a href="JavaScript:openSite('tocmain.html')">Home</a><p>

Page 1</a></p>

Page 2</a></p>

Page 3</a></p>

8 <p><a href="JavaScript:collapse();">Hide Menu</a><p>

</body>

</html>

1 A function called openSite is defined It takes one parameter, the URL of the Web site.

2 The parent is the main window where the frames are defined main.location is the

frame on the right side of the toolbar It was named main when the framesets were

defined The main frame is assigned the URL of one of the Web sites after the user

clicks a link in the menu bar

3 The global variable myUrl gets the URL of the current Web site shown in the right

frame

4 The function called collapse() is defined Its function is to make the right frame

fit into the whole window, hiding the menu bar

5 If the user hasn’t selected any page prior to selecting Hide Menu, the main frame

will take up the whole window The location property of the window object refers

to the location of the parent window, the main window from where the frames

were created

Continues

Định dạng
Số trang	13
Dung lượng	1,37 MB