Thư viện tri thức trực tuyến
Kho tài liệu với 50,000+ tài liệu học thuật
© 2023 Siêu thị PDF - Kho tài liệu học thuật hàng đầu Việt Nam
the book of javascript 2nd edition phần 5 docx
Nội dung xem thử
Mô tả chi tiết
172 Chapter 10
The pages in Figure 10-3 are set next to each other because X in Figure 10-2
tells the browser to set up two frames, arrange them in columns, and make
the first column take up 30 percent of the page and the second column the
rest of the page. Adding more percentages (their sum can’t exceed 100) to
the cols element adds more frames to the page. Alternatively, using the rows
element stacks frames on top of each other. You can tweak frame sets in
dozens of ways. Any good book about HTML devotes a chapter to them.
The two lines after X tell the browser which HTML pages to load into
each frame. Line Y loads navigation.html into the first frame (named nav),
and the next line loads content.html into the second frame (named contents).
Line Z closes the frame set. Notice that you don’t use <body> tags in defining
a frame set.
The next two HTML pages are standard web pages. The first page, navigation.html, contains three links, each leading to a news site. Clicking a link
loads the contents into the contents frame, because each link contains the
element target = "contents" (see [). We’ll see shortly how to use JavaScript to
do the same thing.
Frames and JavaScript
In HTML, the only way an action in one frame can change the contents of
another is through standard HTML links. Fortunately, JavaScript allows you
to expand your repertoire of frame tricks immensely. The JavaScript in Figure 10-4, for example, makes the contents of the right frame change when
a visitor mouses over one of the links on the left. The pages index.html and
content.html are the same as in Figure 10-2; only navigation.html has changed.
navigation.html
<html><head><title>Nav</title>
<script type = "text/javascript">
<!-- hide me from older browsers
X function changeContents(the_url)
{
Y var content_frame = parent.contents;
Z content_frame.location = the_url;
}
// show me -->
</script>
</head>
<body>
<h1> News navigation</h1>
<a href = "http://www.wired.com"
onMouseOver = "changeContents('http://www.wired.com');
">Wired News</a><br>
<a href = "http://www.news.com"
onMouseOver = "changeContents('http://www.news.com');
">C|Net News</a><br>
[ <a href = "http://www.newsoftheweird.com"
onMouseOver = "changeContents('http://www.newsoftheweird.com');
">News of the Weird</a><br>
</body></html>
Figure 10-4: Using JavaScript to change a frame with a mouseover
Using Frames and Image Maps 173
Line-by-Line Analysis of Figure 10-4
The key to this script is the function changeContents(). When a visitor mouses
over the News of the Weird link, [ calls changeContents() and sends it the string
"http://www.newsoftheweird.com".
The changeContents() function starts in X, where the_url is set to whatever
string passes into the function. Line Y tells JavaScript to look for the thing
named contents inside its parent (the frame set containing a frame is the
frame’s parent—see Figure 10-5), and sets the variable content_frame to point
to the contents frame.
You refer to frames in JavaScript the same way you refer to windows.
Just as you can change the page shown in a window by referring to its URL
like this:
window_name.location = "http://www.newsoftheweird.com";
you can change the page shown in a frame like this:
the_frame.location = "http://www.newsoftheweird.com";
This is precisely what Z in Figure 10-4 does. After Y assigns content_frame
to point to the frame we want to change, Z changes that frame’s location by
setting content_frame.location to the_url.
Figure 10-5: A graphical representation of frames and
their parents
174 Chapter 10
Frames and Image Swaps
In the Chapter 5 assignment, I described how clicking a JavaScriptenhanced link in one window can change an image in another window.
Because JavaScript treats frames and windows similarly, the same trick
enables a link in one frame to change an image in another.
As a refresher, Figure 10-6 contains the code necessary to swap an image
in one window by clicking a link in a second window. Figure 10-7 shows how
the same trick works with frames.
first_page.html
<html>
<head>
<title>Control Panel</title>
<script type = "text/javascript">
<!-- hide me from older browsers
X var image_window =
window.open("image_page.html","image_window","width=100,height=100");
// show me -->
</script>
</head>
<body>
Y <a href = "#" onClick =
"image_window.document.the_image.src = 'sad.gif'; return false;">sad</a>
<br>
Z <a href = "#" onClick =
"image_window.document.the_image.src = 'happy.gif'; return false;">happy</a>
</body>
</html>
image_page.html
<html><head><title>The Image Page</title></head>
<body>
[ <img src = "happy.gif" name = "the_image">
</body>
</html>
Figure 10-6: Swapping an image in one window with a link in another
Figure 10-6 consists of two HTML pages. The first page, first_page.html,
starts by launching a new window in X and calling it image_window. This window
will open to image_page.html, which has only one item in it—an image of
a happy face, named the_image ([). When someone clicks the link in Y,
JavaScript looks for the window called image_window and looks in its document
for the_image. Once it finds the_image, it changes its src to sad.gif. The link in
Z changes the image back to happy.gif.
frameset.html
<html>
<head>
<title>Image Swapping in Frames</title>
</head>
<frameset rows = "30%, *">
Using Frames and Image Maps 175
<frame src = "navigation.html" name = "navigate">
<frame src = "image_page.html" name = "image_frame">
</frameset>
</html>
navigation.html
<html>
<head>
<title>Control Panel</title>
</head>
<body>
X <a href = "#" onClick =
"parent.image_frame.document.the_image.src = 'sad.gif'; return false;">sad</a>
<br>
<a href = "#" onClick = "parent.image_frame.document.the_image.src =
'happy.gif'; return false;">happy</a>
</body>
</html>
image_page.html
<html><head><title>The Image Page</title></head>
<body>
Y <img src = "happy.gif" name = "the_image">
</body>
</html>
Figure 10-7: Swapping an image in one frame with a link in another
Figure 10-7 does the same thing with frames instead of windows. The
page frameset.html in Figure 10-7 sets up the page illustrated in Figure 10-8;
it has navigation.html in the top frame (which takes up 30 percent of the
window) and image_page.html in the bottom frame with happy.gif (called
the_image in Y). Line X is the link in the top frame that changes happy.gif
in the bottom frame to sad.gif. The critical part of X is
parent.image_frame.document.the_image.src = 'sad.gif';
which is similar to Y in Figure 10-6:
image_window.document.the_image.src = 'sad.gif';
The only difference is that in
Figure 10-6 we refer directly to
the window image_window, while in
Figure 10-7 we tell the JavaScript
in the navigation.html to go up to
its parent and then down to the
frame image_frame. Figure 10-8
shows the code in Figure 10-7
at work. Figure 10-8: Interframe image
swapping in action
176 Chapter 10
Changing the Contents of Two Frames at Once
In some situations, you may want to change the contents of two or more
frames at once. In Salon’s bug-eating piece, for example, mousing over part
of the world in the map frame changes the contents of all three frames.
Figure 10-9 contains the JavaScript for a simple example of changing more
than one frame: a Spanish-language tutorial. As you can see in Figure 10-10,
clicking a Spanish word in one frame shows you an image of what that word
means in a second frame and puts the translation of the word into English
inside a form element in a third frame.
frameset.html
<html>
<head>
<title>Changing Two Frames at Once</title>
</head>
X <frameset cols = "30%, 30%, *">
<frame src = "navigation.html" name = "navigate">
<frame src = "form_page.html" name = "form_frame">
<frame src = "image_page.html" name = "image_frame">
</frameset>
</html>
navigation.html
<html>
<head>
<title>Navigation Frame</title>
<script type = "text/javascript">
<!-- hide me from older browsers
function changeFrames(new_image, new_words)
{
Y parent.image_frame.document.the_image.src = new_image;
Z parent.form_frame.document.the_form.the_name.value = new_words;
}
// show me -->
</script>
</head>
<body>
[ <a href = "#"
onClick = "changeFrames('apple.gif','apple'); return false;">manzana</a>
<br>
<a href = "#"
onClick = "changeFrames('orange.gif','orange'); return false;">naranja</a>
</body>
</html>
form_page.html
<html><head><title>The Form Page</title></head>
<body>
<form name = "the_form">
<input type = "text" name = "the_name">