Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 13 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
13
Dung lượng
1,37 MB
Nội dung
ptg 10.1 JavaScript and the Browser Object Model 303 10.1.4 Working with Frames 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 From the Library of WoweBook.Com ptg 304 Chapter 10 • It’s the BOM! Browser Objects 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 Tag Attribute What It Does <frameset> Defines a collection of frames or other framesets. 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. rows Defines the number and size of rows in a frameset. cols Defines the number and size of columns in a frameset. <frame> Defines attributes of specific frames. name Used by JavaScript to reference the frame by name. src The URL or location of the frame. EXAMPLE 10.14 <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> From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 305 <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> EXPLANATION 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. EXAMPLE 10.14 (CONTINUED) 75%25% From the Library of WoweBook.Com ptg 306 Chapter 10 • It’s the BOM! Browser Objects The next example shows a window partitioned into three horizontal frames. Figure 10.25 Two vertically positioned frames: Output from Example 10.14. EXAMPLE 10.15 <html> <head><title>Frame Me!</title></head> <! 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 > <frame src="bottomframe.html" > 4 </frameset> </html> EXPLANATION 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 placed horizontally on the page (see Figure 10.26). 130 pixels in rows topframe.html main.html bottomframe.html From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 307 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. EXPLANATION ( CONTINUED) frames[0] frames[1] frames[2] parent Window object From the Library of WoweBook.Com ptg 308 Chapter 10 • It’s the BOM! Browser Objects 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. frames An array of frames. 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. self The current frame. top The window that started the script. window The current window or frame. Table 10.12 Methods of the frame Object Method What It Does blur() Removes focus from the frame. clearInterval() Clears a timed interval. clearTimeout() Clears a timeout. focus() Puts focus into the frame. print() Invokes a print dialog box. setInterval() Sets a timed interval. setTimeout() Sets a timeout. unwatch() Unsets the watchpoint. watch() Sets a watchpoint on a frame property; if a property changes, calls a function. From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 309 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. EXAMPLE 10.16 <html> <head><title>Frame Me!</title></head> <! 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> EXPLANATION 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. EXAMPLE 10.17 <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 From the Library of WoweBook.Com ptg 310 Chapter 10 • It’s the BOM! Browser Objects 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 <body bgColor="white"> <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> EXPLANATION 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. EXAMPLE 10.17 (CONTINUED) From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 311 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 window 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. EXAMPLE 10.18 <html> <head><title>Forcing the Frame</title> <script type = "text/javascript"> 1 if (window != top){ // True if window is not the top // window in the hierarchy 2 top.location.href = location.href; // Put this window on top } </script> 3 <body bgcolor="lightblue"> <h1> The important page that we're talking about </h1> </body> </html> EXPLANATION 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 From the Library of WoweBook.Com ptg 312 Chapter 10 • It’s the BOM! Browser Objects 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. EXAMPLE 10.19 <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset cols="117,450" rows="*"> <frame src="toctoolbar.html" name="menu"> <frame src="tocmain.html" name="main"> </frameset> <noframes> <body bgcolor="#FFFFFF"> Your browser needs to support frames to view this page. </body> </noframes> </html> (The Startup Main Page) <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor=yellow> <h1>This is the main page</h1> </body> </html> (The Menu Bar Page) <html> <head> <title>Menu Bar</title> EXPLANATION ( CONTINUED) From the Library of WoweBook.Com [...]... location } } Home Page 1 Page 2 Page 3 Hide Menu EXPLANATION... 310.) F O RM A T JavaScript: window.location.href = "URL"; JavaScript: window.location.replace("URL"); EXAMPLE JavaScript: window.location.href = "http://www.legos.com/"; JavaScript: window.location.replace("http://www.legos.com/"); Table 10.13 Properties of the location Object Property What It Describes in the URL hash If it exists, the anchor part host The hostname:port hostname The hostname href The... WoweBook.Com 10.1 JavaScript and the Browser Object Model 10.1.5 315 The location Object The location object is a property of the window object and is used to access the URL of the document currently loaded in the window In previous examples, we have seen location as a window property, but because it is really also an object itself, it also has properties used to describe the different parts of a URL... only get part of the page, not the complete frameset Also, when a page is divided into frames, the visitor cannot bookmark the page if the browser is not pointing to the top frameset The location object can be used to make sure the topmost window is the one currently viewed in the browser (See the section “Using the top Property to Keep the Main Window Out of a Frame” on page 310.) F O RM A T JavaScript: ...10.1 JavaScript and the Browser Object Model EXAMPLE 1 2 3 4 5 6 7 8 313 10.19 ( C O N T I N U E D) var myUrl; function openSite(url){ parent.main.location = url; myUrl=url; } function collapse(){ . 310.) FORMAT JavaScript: window.location.href = "URL"; JavaScript: window.location.replace("URL"); EXAMPLE JavaScript: window.location.href = "http://www.legos.com/"; JavaScript: . <h3> Pick a color: <br /> 3 <a href=" ;JavaScript: setBgColor('red')">red</a> <br /> <a href=" ;JavaScript: setBgColor('yellow')">yellow</a> <br. href=" ;JavaScript: setBgColor('yellow')">yellow</a> <br /> <a href=" ;JavaScript: setBgColor('green')">green</a> <br /> <a href=" ;JavaScript: setBgColor('blue')">blue</a> </h3>