Section 14.3. Obtaining Window, Screen, and Browser Information
14.3. Obtaining Window, Screen, and Browser InformationScripts sometimes need to obtain information about the window, desktop, or browser in which they are running. This section describes properties of the Window, Screen, and Navigator objects that allow you to determine things such as the size of the browser window, the size of the desktop, and the version number of the web browser. This information allows a script to customize its behavior based on its environment. 14.3.1. Window GeometryMost browsers (the only notable exception is Internet Explorer) support a simple set of properties on the Window object that obtain information about the window's size and position: // The overall size of the browser window on the desktop var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; // This is the position of the browser window on the desktop var windowX = window.screenX var windowY = window.screenY // The size of the viewport in which the HTML document is displayed // This is the window size minus the menu bars, toolbars, scrollbars, etc. var viewportWidth = window.innerWidth; var viewportHeight = window.innerWidth; // These values specify the horizontal and vertical scrollbar positions. // They are used to convert between document coordinates and window coordinates. // These values specify what part of the document appears in the // upper-left corner of the screen. var horizontalScroll = window.pageXOffset; var verticalScroll = window.pageYOffset; Note that these properties are read-only. Window-manipulation methods that allow you to move, resize, and scroll the window are described later in this chapter. Also note that there are several different coordinate systems you must be aware of. Screen coordinates describe the position of a browser window on the desktop; they are measured relative to the upper-left corner of the desktop. Window coordinates describe a position within the web browser's viewport; they are measured relative to the upper-left corner of the viewport. Document coordinates describe a position within an HTML document; they are measured relative to the upper-left corner of the document. When the document is longer or wider than the viewport (as web pages often are), document coordinates and window coordinates are not the same, and you'll need to take the position of the scrollbars into account when converting between these two coordinate systems. There's more about document coordinates in Chapters 15 and 16. As mentioned earlier, the properties of the Window object listed here are not defined in Internet Explorer. For some reason, IE places these window geometry properties on the <body> of the HTML document. And, further confusing matters, IE 6, when displaying a document with a <!DOCTYPE> declaration, places the properties on the document.documentElement element instead of document.body. Example 14-2 provides the details. It defines a Geometry object with methods for portably querying the viewport size, scrollbar position, and screen position. Example 14-2. Portably querying window geometry
14.3.2. The Screen ObjectThe screen property of a Window object refers to a Screen object that provides information about the size of the user's display and the number of colors available on it. The width and height properties specify the size of the display in pixels. You might use these properties to help decide what size images to include in a document, for example. The availWidth and availHeight properties specify the display size that is actually available; they exclude the space required by features such as a desktop taskbar. Firefox and related browsers (but not IE) also define availLeft and availTop properties of the screen object. These properties specify the coordinates of the first available position on the screen. If you are writing a script that opens a new browser window (you'll learn how to do this later in the chapter), you might use properties like these to help you center it on the screen. Example 14-4, later in this chapter, illustrates the use of the Screen object. 14.3.3. The Navigator ObjectThe navigator property of a Window object refers to a Navigator object that contains information about the web browser as a whole, such as the version and a list of the data formats it can display. The Navigator object is named after Netscape Navigator, but it is also supported by all other browsers. (IE also supports clientInformation as a vendor-neutral synonym for navigator. Unfortunately, other browsers have not adopted this more sensibly named property.) In the past, the Navigator object was commonly used by scripts to determine if they were running in Internet Explorer or Netscape. This browser-sniffing approach is problematic because it requires constant tweaking as new browsers and new versions of existing browsers are introduced. Today, a capability-testing approach is preferred. Rather than making assumptions about particular browsers and their capabilities, you simply test for the capability (i.e., the method) you need. For example, here is how you use the capability-testing approach with event-handler registration methods (which are discussed in Chapter 17): if (window.addEventListener) { // If the addEventListener( ) method is supported, use that. // This covers the case of standards-compliant browsers like // Netscape/Mozilla/Firefox. } else if (window.attachEvent) { // Otherwise, if the attachEvent( ) method exists, use it. // This covers IE and any nonstandard browser that decides to emulate it. } else { // Otherwise, neither method is available. // This happens in old browsers that don't support DHTML. } Browser sniffing is sometimes still valuable, however. One such case is when you need to work around a specific bug that exists in a specific version of a specific browser. The Navigator object lets you do this. The Navigator object has five properties that provide version information about the browser that is running:
The following lines of JavaScript code display each Navigator object property in a dialog box: var browser = "BROWSER INFORMATION:\n"; for(var propname in navigator) { browser += propname + ": " + navigator[propname] + "\n" } alert(browser); Figure 14-1 shows the dialog box displayed when the code is run on IE 6. Figure 14-1. Navigator object properties As you can see from Figure 14-1, the properties of the Navigator object have values that are sometimes more complex than what you need. You may be interested in only the first digit of the appVersion property, for example. When using the Navigator object to test browser information, you can use methods such as parseInt( ) and String.indexOf( ) to extract only the information you want. Example 14-3 shows some code that does this: it processes the properties of the Navigator object and stores them in an object named browser. These properties, in their processed form, are easier to use than the raw navigator properties. The general term for code like this is a client sniffer, and you can find more complex and general-purpose sniffer code on the Internet. (See, for example, http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html.) For many purposes, however, code as simple as that shown in Example 14-3 works just fine. Example 14-3. Determining browser vendor and version
An important point to take away from this section is that the properties of the Navigator object do not reliably describe the browser. Firefox 1.0, for example, has a appName of "Netscape" and a appVersion that begins "5.0". Safari, which is not based on Mozilla code, returns the same values! And IE 6.0 has an appCodeName of "Mozilla" and an appVersion that begins with the number "4.0". The reason for this is that there is so much browser-sniffing code deployed in old, existing web pages that manufacturers cannot afford to break backward compatibility by updating these properties. This is one of the reasons that browser sniffing has become less useful and is being superseded by capability testing. |
EAN: 2147483647
Pages: 767