Thông tin tài liệu
ptg 10.1 JavaScript and the Browser Object Model 315 10.1.5 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 loca- tion as a window property, but because it is really also an object itself, it also has proper- ties used to describe the different parts of a URL (see Table 10.13). If you are writing a page containing frames, the entire page might not be picked up by a search engine, such as Yahoo! or Google. Anyone linking to your page via the search engine will 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.) FORMAT 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 entire URL. pathname The pathname. port The port number. protocol The protocol and colon. search The query string. From the Library of WoweBook.Com ptg 316 Chapter 10 • It’s the BOM! Browser Objects Two methods of interest (see Table 10.14) are replace() and reload(). The replace() method is used to change the location of the current page; that is, to point to another page. It is similar to the href property, but where href puts the new page at the top of the history list, the replace() method removes the current page from the history list and replaces it with the new page. The reload() method behaves like the browser’s Reload button. It causes the window’s current document to be reloaded. Loading a New Page into a Frame with the location Object. In Example 10.20, the location object changes the location of the current page. By selecting a Web site, the user is taken to that site, which is displayed in the bottom frame of a frameset. Table 10.14 Methods of the location Object Method What It Does reload() Reloads the current URL. replace() Replaces the current page with a new one. unwatch() Removes a watch point on the location property. watch() Sets a watch point on the location property; that is, calls a function if the property changes. EXAMPLE 10.20 (The file defining the framesets called framefile.html) <html> <head><title>Frames</title></head> <frameset rows="130,*" frameborder="yes" border="8" framespacing="0"> <frame src="location.html" scrolling="no"> <frame src="emptyframe.html" > </frameset> </html> (The empty file that will be the bottom frame called emptyframe.html) <html> <head> <title>Empty Frame</title> </head> <body> </body> </html> From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 317 <html> <head> <title>The History Object</title> <script type="text/javascript"> 1 function loadPage(urlAddress){ 2 parent.frames[1].location.href = urlAddress; } </script> </head> <body bgcolor="F8C473"> <big> 3 <form name="form1" id="form1"> <input type="button" value="Amazon" 4 onClick="loadPage('http://amazon.com');"> <input type="button" value="Borders" onClick="loadPage('http://borders.com');"> <input type="button" value="Barnes&Noble" onClick="loadPage('http://barnesandnoble.com');"> </form> </big> </body> </html> EXPLANATION 1 When the function loadPage() is called, it gets the URL address of the bookstore as its only parameter and assigns the address to the location object. 2 There are two frames in this document. The first frame contains the buttons with the names of bookstores to pick from—Amazon, Borders, and Barnes & Noble (see Figure 10.31). The second frame is empty until the user makes a selection. This statement assigns the URL of the chosen bookstore to the location object by travers- ing the JavaScript hierarchy, starting at the parent window, to the bottom frame, frames[1] and to the href property of the location object. By doing this, the browser will find the home page of the bookstore, and display it in the bottom frame. 3 The HTML form starts here. It is a form that displays three graphical buttons. When the user clicks one of the buttons, a function called loadPage() will be in- voked and the bottom frame will display its Web page. 4 The JavaScript onClick event handler is triggered when the user clicks the button. The function called loadPage() will be called with the URL of the bookstore. The display is shown in Figure 10.32. EXAMPLE 10.20 (CONTINUED) From the Library of WoweBook.Com ptg 318 Chapter 10 • It’s the BOM! Browser Objects Figure 10.31 Two frames: The top frame puts the location of the bookstore in the bottom frame. Figure 10.32 After the user clicks the Borders button, the bottom empty frame gets the page at that location. From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 319 10.1.6 The history Object The history object is a property of the window object. It keeps track of the pages (in a stack) that the user has visited. The history object is most commonly used in JavaScript to move back or forward on a page, similar to the back button and forward button sup- ported by your browser. The history object can reference only those pages that have been visited; that is, those pages on its stack. It has a length property and three methods called go(), back(), and forward(). See Tables 10.15 and 10.16. Table 10.15 Properties of the history Object Property What It Describes in the URL current The current document URL. length The number of entries in the history object. next The URL of the next document in the history object. previous The URL of the previous document in the history object. search The query string. Table 10.16 Methods of the history Object Method What It Does back() Goes to the previous URL entry in the history list; like the browser’s back button. forward() Goes to the next URL entry in the history list; like the browser’s forward button. go() The browser will go forward or back (if the value is negative) the number of specified pages in the history object. EXAMPLE history.go(-3) // Go back three pages history.go(2) // Go forward three pages back() // Same as history.go(-1) forward() // Same as history.go(1) From the Library of WoweBook.Com ptg 320 Chapter 10 • It’s the BOM! Browser Objects EXAMPLE 10.21 1 (The file defining the framesets called framefile.html) <html> <head><title>Frames</title></head> <frameset rows="130,*" frameborder="yes" border="8" framespacing="0"> <frame src="location.html" scrolling="no"> <frame src="emptyframe.html" > </frameset> </html> 2 (The empty file will be the bottom frame called emptyframe.html) <html> <head> <title>Empty Frame</title> </head> <body> </body> </html> <html> <head> <title>The History Object</title> <script type="text/javascript"> function loadPage(urlAddress){ 3 parent.frames[1].location.href = urlAddress; } </script> </head> <body> <font size="+1" face=arial,helvetica> <form name="form1"> <input type="button" value="Amazon" onClick="loadPage('http://amazon.com');" /> <input type="button" value="Borders" onClick="loadPage('http://borders.com');" /> <input type="button" value="Barnes&Noble" onClick="loadPage('http://barnesandnoble.com');"/> </form> <form name="form2" id="form2"> <input type="button" value="go back" 4 onClick="JavaScript: history.go(-1);"> <input type="button" value="go forward" 5 onClick="JavaScript: history.go(1);"> </form> From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 321 </font> </body> </html> EXPLANATION 1 This file defines the framesets that will be used to create the page seen in Figure 10.33. 2 This is the empty frame file seen at the bottom of the page. 3 When the user clicks one of the buttons, labeled Amazon, Borders, and Barnes & Noble, parent.frames[1].location.href, the bottom frame, will be assigned the URL of the selected page. 4 This button will be used if the user wants to go back to the previous page. If the history object’s go() method takes a negative integer, such as history.go(-1), the user will be sent back to the previous page just visited. (If nothing happens, the page is blank, and there is nothing in the history list to return to.) 5 This button will be used if the user wants to move to the next page. If you move forward and nothing happens, it’s because you don’t have anything on the history stack yet; you haven’t gone anywhere. Once you load a new page, then go back, you will be able to move forward. Likewise if you go back and an empty page ap- pears, it is because you haven’t loaded a page yet. The history object’s go() method, history.go(1), will then move you forward one page. Output is shown in Figures 10.33 and 10.34. Figure 10.33 Frames before selecting a bookstore. EXAMPLE 10.21 (CONTINUED) From the Library of WoweBook.Com ptg 322 Chapter 10 • It’s the BOM! Browser Objects 10.1.7 The screen Object The screen object is a property of the window object and is automatically created when a user loads a Web page. It gives you access to the various properties of the user’s screen such as its height, width, color depth, and so on. These are listed in Table 10.17. This can be helpful when designing pages that will require specific dimensions. For example, if the user’s available screen width is less than 650 pixels (640×480), you might want to load a smaller image, whereas if it is over 1,000 pixels (1024×768), a larger image can be loaded. There are no event handlers for this object. Example 10.22 displays the prop- erties of the screen object shown in Table 10.17. Figure 10.34 Bottom frame displays bookstore. If another bookstore is selected, then you can use history. Table 10.17 Properties of the screen Object Property What It Describes availHeight The pixel height of the screen, minus toolbars, and so on. availLeft The x coordinate of the first pixel, minus toolbars, and so on. From the Library of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 323 availTop The y coordinate of the first pixel, minus toolbars, and so on. availWidth The pixel width of the screen, minus toolbars, and so on. colorDepth The maximum amount of colors that the screen can display. height The pixel height of the screen. pixelDepth The number of bits per pixel of the screen. width The pixel width of the screen. EXAMPLE 10.22 <html> <head><title>Screen Properties</title></head> <body bgcolor="orange"><font face="verdana"> <b>The Screen</b><br /> <table border=2> <tr><th>Screen Property</th><th>Value</th></tr> <tr> <td>Height</td> <td> <script type="text/javascript"> 1 document.write(screen.height); </script> </td> </tr> <tr> <td>Available Height</td> <td> <script type="text/javascript"> 2 document.write(screen.availHeight); </script> </td> </tr> <tr> <td>Width</td> <td> <script type="text/javascript"> 3 document.write(screen.width); </script> </td> </tr> Continues Table 10.17 Properties of the screen Object (continued) Property What It Describes From the Library of WoweBook.Com ptg 324 Chapter 10 • It’s the BOM! Browser Objects <tr> <td>Available Width</td> <td> <script type="text/javascript"> 4 document.write(screen.availWidth); </script> </td> </tr> <tr> <td>Color Depth</td> <td> <script type="text/javascript"> 5 document.write(screen.colorDepth); </script> </td> </tr> </table> </font> </body> </html> EXPLANATION 1 The height property of the screen object contains the height of the screen in pixels. (To see how to create a table dynamically with JavaScript, see Chapter 15, section “Creating a Table with the DOM” on page 644.) 2 The available height is the height minus any toolbars or other objects attached to the window. 3 The width property of the screen object contains the width of the screen in pixels. 4 The availWidth is the pixel width of the screen, minus toolbars, and so on. 5 The colorDepth refers to the maximum number of colors that the screen can dis- play in bit format. The display is shown in Figure 10.35. EXAMPLE 10.22 (CONTINUED) From the Library of WoweBook.Com [...]...10.2 What You Should Know 325 Figure 10 .35 Tables showing properties of the screen object in Internet Explorer (left) and Firefox (right) 10.2 What You Should Know They say windows are the eye of the soul and what would a browser be without... appName and userAgent for your browser How to detect a plug-in What a browser sniffer does What MIME types are How to open and close a window How to give the window focus How to move a window to another part of the screen How to access the status bar How to access the title bar Two ways to set a timer How to create frames How to create a navigation bar How to use the location object How to use the history... display the name of your browser, the version, and the operating system you are using (Use the parseInt() function to print just the version number.) 3 Does your browser support Shockwave Flash? Write a JavaScript program to show whether the plug-in is installed 4 Create two links, one to open a new window and one to close it The new window will display this message in a big font: The eye is the window... scrollbar, and it will have the focus 5 Create an HTML document that contains four frames (i.e., four panes in a window, as in Figure 10.24) Each frame will display a different image In another window, use JavaScript to display the number of frames in the original window and the name of the original window 6 Create a program that produces a page containing frames The first frame will span across the top . 310.) FORMAT JavaScript: window.location.href = "URL"; JavaScript: window.location.replace("URL"); EXAMPLE JavaScript: window.location.href = "http://www.legos.com/"; JavaScript: . of WoweBook.Com ptg 10.1 JavaScript and the Browser Object Model 317 <html> <head> <title>The History Object</title> <script type="text /javascript& quot;> 1. type="button" value="go back" 4 onClick=" ;JavaScript: history.go(-1);"> <input type="button" value="go forward" 5 onClick=" ;JavaScript: history.go(1);">
Ngày đăng: 04/07/2014, 02:20
Xem thêm: Học JavaScript qua ví dụ part 35 docx, Học JavaScript qua ví dụ part 35 docx
