|
The Navigator object stores information about the user's browser and platform. You can use this information to direct users to specific pages or features, or to create code to address known browser incompatibilities. The Navigator object contains the following properties:
- navigator.appCodeName - code name of the browser, usually "Mozilla" in both Netscape and IE.
- navigator.appName - the name of the browser ("Netscape" or "Microsoft Internet Explorer" for example)
- navigator.appVersion - a string that contains the version number of the browser as well as additional information regarding the platform and compatibility.
- navigator.mimeTypes[] - an array of MIME types recognized by the browser.
This array is empty in IE.
- navigator.platform - the user's operating system, such as "Win32". JS 1.2
- navigator.plugins[] - an array of plugins installed in the browser.
This array is empty in IE.
- navigator.userAgent - the user-agent value passed in the HTTP header. Usually a combination of appCodeName and appVersion strings (but not always).
The navigator.plugins[] array contains references to all of the plugins installed in a user's browser. Each individual Plugin object has the following properties:
- name - the name of the plugin
- description - description of the plugin
- filename - the file location of the plugin
- length - the number of MIME types the plugin supports
In addition to the plugins[] array, the Navigator object also contains an array of supported MIME types, stored in the navigator.mimeTypes[] array. Each mimeType object has the following properties:
- description - description of the MIME type
- enabledPlugin - a reference to the plugin configured for the MIME type
- suffixes - file extensions for the MIME type
- type - the name of the MIME type
To check for a specific plugin in Netscape browsers, you can use either the plugins[] or mimeTypes[] array:
if (navigator.plugins["Shockwave Flash"]) {
var flashInstalled = "true";
}
if (navigator.mimeTypes["application/x-shockwave-flash"]) {
var flashInstalled="true";
}
Since the plugins[] and mimeTypes[] arrays are empty in some versions of Internet Explorer*, there is no universally effective way to use JavaScript to detect for the presence of plugins. However, in Windows versions of Internet Explorer, the ActiveX controls contain references to installed plugins, so you can access these references by using VBScript:
<script language="VBScript">
<!--
on error resume next
If myBrowser = "ie_win" then
FlashInstalled =(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash")))
End If
If FlashInstalled = "True" then
flash = "yes"
End If
//-->
</script>
*Note: in Internet Explorer 5 for Macintosh, the plugins[] and mimeTypes[] arrays should function normally.
Rather than using browser detection to address incompatibilities, it is often more efficient to use JavaScript to determine whether or not a browser supports a specific feature. For instance, you might enclose executable code within an if statement and test for a particular property, object or method. If the browser does not support the object in question, it will not execute the code. For example, object detection is often used to resolve DOM conflicts when implementing DHTML functionality. Instead of checking for browser name and version numbers, use object detection to test for the various ways in which browsers implement style properties used to dynamically manipulate HTML content.
if (document.images) {
}
if (window.setInterval) {
}
if (document.layers) {
}
DHTML is a technology that combines JavaScript and CSS to dynamically manipulate HTML content in a web page. In much the same way that we use JavaScript to access frames, forms, and images, DHTML relies on JavaScript to access style properties such as absolute positioning, visibility and stacking index. The challenge in DHTML scripting arises from the various ways in which different browsers store references to these CSS style properties.
In 4th generation browsers, the first generation to support CSS (and therefore DHTML), references to style properties are stored differently in Netscape and Internet Explorer. Internet Explorer allows you to access style properties via a global reference to all HTML elements on a page. For instance, for a positioned DIV tag with an ID of "graph1", you can access the visibility style property in the following way:
document.all.graph1.style.visibility;
Netscape 4 stores references to style properties via a Layers object. Specifically, an HTML element that is absolutely positioned using CSS properties is stored as an individual Layer and can be referenced by name in the layers array (layers["nameOfLayer"]) or as an object in the DOM tree (document.nameOfLayer):
document.layers["graph1"].visibility;
document.graph1.visibility;
Also note that in Netscape 4.x, values of some style properties are non-standard. Values for the visibility property are either "hide" or "show", rather than the standard "visible" and "hidden". Values for absolute positioning are expressed in numbers, whereas the other DOMs require string values along with a unit.
Netscape 6 abandons the Layer object in favor of the W3C-approved DOM. The new DOM allows you to reference HTML or XML elements on a page by their ID, name, or tag type:
document.getElementById("graph1").style.visibility;
(Note: IE 5+ versions support both document.all and the W3C DOM)
To write effective, cross-browser DHTML that degrades gracefully, use object detection to resolve these conflicts in the ways in which browsers access style properties. Remember to take into account 4 DOMs: Internet Explorer's document.all, Netscape's document.layers, the new standard DOM, and the browsers that have no support for DHTML.
var myDiv;
if (document.all) {
myDiv = document.all.graph1.style;
}
else if (document.layers) {
myDiv = document.graph1;
}
else if (document.getElementById) {
myDiv = document.getElementById("graph1").style;
}
// for non-DHTML browsers
else return;
tk
| 
