Section 9.4. history, screen, and navigator
9.4. history, screen, and navigatorThe remaining three objects that are direct children to the window object are history, screen, and the navigator. Between these three, you'll have a good idea of what kind of browser is accessing the page, and how much space you have in which to work. You'll also be able to send your web-page readers on their way using the history object. As these objects are fairly simple in functionality and single-purposed, I'll review each, in turn, and then provide one example for all three at the end of this section. 9.4.1. historyThe history object is just as it sounds: it maintains a history of pages loaded into the browser. As such, its methods and properties have to do with navigation through these pages, including going forward and back. You can traverse through history using relational properties, such as next and previous, or using the methods back and forward. You can find the current page with current, and get the length of history (number of pages stored in the history cache). You can also go to a specific page using the go method and passing in a page numbernegative to go backward that many pages: history.go(-3); And positive to go forward: history.go(3); history, as they say, takes care of itself; you as page developer don't have to worry overmuch about it. About the only time when history becomes a concern is when using in-page techniques such as DHTML and Ajax, which work outside the normal patterns of page loading. However, we'll get into these issues later in the book. Returning to the BOM, the next object of interest accessible via the page hierarchy is the screen. 9.4.2. screenThe screen object contains information about the display screen, including width and height (both actual and available), as well as the color or pixel depth. Though not used very often, it is a good reference for any functionality that might change the size of the browser window or create colorful objects requiring a certain palette. The exact properties supported can change from browser to browser, and version to version. At a minimum, most of the following are supported:
The reason for the discrepancy between actual and available height and/or width is to accommodate the toolbar residing at the top, bottom, or side of many display screens. In earlier DHTML implementations, developers would test the color depth of the screen and change to lower resolution images more appropriate to the configuration. However, even the more inexpensive monitors now support color depths greater than the older eight pixels, and most support true color. As such, the extra overhead to process the screen and return the images no longer has the payback it once had. Still, the color depth could alter your use of colors with style settings, so it's helpful informationas is the available width and height if you're working with a page layout. 9.4.3. navigatorLast, but not least, the navigator object provides information about the browser or other agent that accesses the page. This includes being able to check the operating system, the browser or browser family, security policy, language, and whether cookies are enabled. Some browsers also provide an array of installed plug-ins and other properties applicable to the specific user agent. The navigator object usually supports the following:
The mimeTypes collection consists of mimeType objects, which have properties of description, type, and plugin. The plugins collection consists of plug-in objects with properties of a mimeType array of its own: description, filename, length of mimeType array, and plug-in name. There are also a small number of methods that are supported among several browsers: javaEnabled, to test for Java enabling in the browser; preference to get and set browser preferences; and taintEnabled to check if data taint checking (a security feature) is enabled. 9.4.4. One Page, Three ObjectsExample 9-11 is a page that runs through all three of the objects just coveredhistory, screen, and navigatorprinting out property values and providing a couple of options for testing history. Try it out in various browsers, in as many operating systems as you can, to see what's supported and what's not. Example 9-11. Exploring the history, navigator, and screen objects
You might be surprised at what shows up in some of the collections, such as the plugins. I know I was surprised to see one that provided digital-rights management, when I don't remember having installed a plug-in of this nature. As for the mimeType object, some browsers also support a suffix property on the object, such as *.html and so on. These three objects just demonstrated are the last of the objects directly accessible via the window object, save one. The last object covered in this chapter is an old friend by now: the document. In a way, most of the rest of the book focuses on the document object. However, we'll take a little time to look at it from a BOM perspective before moving into covering its role in DOM, DHTML, and Ajax.
Figure 9-2. Slayeroffice.com's MouseOver DOM Inspector 9.4.5. documentReturning to Figure 9-1 at the beginning of the chapter, you can see that the document object is what provides access to any element contained within the browser page. This includes forms and form elements, as well as cookies, all covered earlier. This also includes the collection of page images, links, embedded objects; in fact, all elements contained within the page boundaries have document as parent. Older variations of document had another collection, called layers, and the newer browser versions all share a style property, but the figure gives you an idea of how important the document is to dynamic page development. The previous chapters have covered the document object methods of getElementById, as well as writeln; the next chapter on the DOM provides information on accessing all page elements using generic methods. For now, I want to pull back to the older method of accessing page elements through the various document collections, focusing on links, images, and the all-purpose all collection. 9.4.6. LinksThe difference between a link and an anchor is the type of anchor attributes used. Both are based on the anchor tag (<a></a>). However, if an href attribute is provided, it's a link to another site; if just the name attribute is provided, it acts just as an anchor, which can set focus to a specific point in the page. The links collection off of the document object consists of all hypertext links in the page, accessible as an array, starting with the first link in the page and moving down and to the right. However, you can also add an identifier for each hypertext link and access it in the array through this identifier. Each item in the collection is a link object, which has properties of its own. Some properties are similar to those found with location: host, protocol, port, search, and hash, each of which returns that specific piece of the hypertext link. You can also access the complete link through the href property, and the associated linked object (text), tHRough text. This can be handy if you're pulling links from a document in a web page into a handy sidebar reference. Just make sure that you don't write the links out to the same page as the document, because you'll confuse the browser by adding new links at the same time as you're trying to process existing links. In Example 9-12, the page contains text with three links. The links collection is accessed through the document object, and the links and associated text are extracted and printed just below the paragraphs. Example 9-12. Pulling links from page
A better approach might be to provide alternative text in the link, using the title attribute, and then printing this out: <a href="http://somelink.com" title="A better description of link">than this</a> ... document.writeln(link.title + " : " + link.href + "<br />"); However, this approach is sneaking into the higher-level DOMs where all attributes are accessible off an object. Still, regardless of level, most browsers support both. 9.4.7. ImagesOne of the earliest dynamic page-development techniques was to alter images within the document. This is still a popular technique for simple photo-slideshow types of applications, enabled through the document images collection. As with links, images are objects in their own right, and you can set their attributessuch as src, the source URL for the imagedirectly. You can also create new instances of the images using the new constructor. In Example 9-13, a slideshow is created of the first five images from Chapter 1, and a simple mechanism is put in place to traverse the list, replacing the current document image with the next one in the list. An array of images preloads the images when the page loads so that the transition happens more quickly. Example 9-13. Creating a slideshow using the images collection
Again, like the previous example with links, this example tends to blur the line between DOM levels. However, it also works in all of the most popular web browsers, which is what's important for our purposes. Also notice in Example 9-13 that, along with the images, the src attribute can be changed. This differs from Example 9-12, which just outputs the link attributes. The image source is an attribute that can be read or written, while the link attributes can only be read. There are ways, though, to adjust all page elements, and we'll look at them in the next section. |
EAN: 2147483647
Pages: 151