Browser Objects 10.1 JavaScript and the Browser Object Model JavaScript programs are associated with a browser window and the document displayed in the window.. In the browser object mod
Trang 1271
10
It’s the BOM!
Browser Objects
10.1 JavaScript and the Browser Object Model
JavaScript programs are associated with a browser window and the document displayed
in the window The window is a browser object and the document is an HTML object
In the browser object model, sometimes called BOM, the window is at the top of the tree,
and below it are objects: window, navigator, frames[], document, history, location, and
screen See Figure 10.1.
If you are writing a JavaScript program that needs to manipulate the window, then you
would use the window object and properties and methods associated with it For example,
the status property of the window object is used when you want to display text in the
sta-tus bar, and the window’s alert method allows you to send a message to a dialog box.
The document object model refers to the HTML document and all the elements and
attri-butes associated with it Because your Web page is so closely linked to HTML (or XML),
JavaScript uses the DOM to access the HTML elements and attributes within a page The
document is the root of this model Each HTML element is assigned to an object: There are
Figure 10.1 The hierarchy of the browser object model.
Current Window
self,
window,
parent, top
Window
objects
navigator
Navigator
object
frames[]
Array of Window objects
document
Document object
history
History object
location
Location object
screen
Screen object
Trang 2image objects, form objects, link objects, and so on (see Figure 10.2) (See Chapter 11,
“Working with Forms and Input Devices,” for more on document objects and the DOM.)
By combining the browser and document object models, JavaScript allows you to
manipulate all of the elements in a page as objects, from the window down the hierarchy,
as shown in Figure 10.3
Figure 10.2 The hierarchy of the document object model.
Figure 10.3 The browser and document object models combined (only a partial diagram).
links[]
array of
Link
objects
anchors[]
array of Anchor objects
forms[]
array of Form objects
images[]
array of Image objects
applets[]
array of applet objects
embeds[]
array of embedded objects
document
Document object
elements[]
elements[]
links[]
Array of Link objects
anchors[]
Array of Anchor objects
forms[]
Array of Form objects
images[]
Array of Image objects
Current Window
self,
window,
parent, top
Window
objects
navigator
Navigator
object
frames[]
Array of Window objects
document
Document object
history
History object
location
Location object
screen
Screen object
elements[]
Trang 310.1.1 Working with the navigator Object
The navigator object contains properties and methods that describe the browser
Netscape Navigator and Internet Explorer support the navigator object, but some
brows-ers do not
The navigator object can be used for platform-specific checking to determine the version
of the browser being used, whether Java is enabled, what plug-ins are available, and so on
Table 10.1 lists the properties that describe the navigator object.
Table 10.1 Properties of the navigator Object
appCodeName Code name for the browser.
appName Name of the browser.
appVersion Version of the browser.
mimeTypes An array of MIME types supported by the browser.
platform The operating system where the browser resides.
userAgent HTTP user-agent header sent from the browser to the server.
E X A M P L E 1 0 1
<html>
<head><title>Navigator Object</title></head>
<body>
<big>
<script type="text/javascript">
1 for(var property in navigator){
2 str="navigator"+"."+ property;
3 document.write(property+ " <em>"+
str+"</em><br />");
}
</script>
</big>
</body>
</html>
E X P L A N A T I O N
1 The special for loop assigns, in turn, each property of the navigator object to the
variable called property.
2 A string is created by concatenating “navigator” with a dot and the property value.
3 Each property and its value of the navigator object is displayed in the browser
win-dow See Figures 10.4 through 10.7
Trang 4Figure 10.4 In Firefox the browser window displaying the properties of the navigator object:
Output from Example 10.1 (Note that the appName property of Firefox is “Netscape.”)
Figure 10.5 In Opera, the browser window displaying the properties of the navigator
object: Output from Example 10.1.
Trang 5Figure 10.6 In Internet Explorer, the browser window displaying the properties of the
navigator object: Output from Example 10.1.
Figure 10.7 In Safari, the browser window displaying the properties of the navigator object:
Output from Example 10.1.
Trang 6What Is Your Browser’s Name? Version Number? Browsers support different
features, properties, and methods; for example, Internet Explorer might display a page
in a slightly different form than Firefox, one version of Mozilla might support a feature
not supported by an older version, a version of Internet Explorer might not support a
feature supported by Opera, and so on If you take into consideration all the other
browsers and their unique features, it can be tricky to please all of the browsers all of the
time or even some of the browsers all of the time Browser detection allows you to check
for specific browser names, versions, whether cookies are enabled, what types of
plug-ins are loaded, and so on The navigator object contaplug-ins a number of properties that
allow you to detect information about the user’s browser so you can customize your Web
page in a way that is transparent to the user
What Is a Browser Sniffer? A browser sniffer is a program that makes browser
detection easy Many Web sites provide free browser sniffers that determine the types of
different browsers Go to http://www.quirksmode.org/js/detect.html, where you will find a
E X A M P L E 1 0 2
<html>
<head><title>The Navigator Object</title></head>
<body>
<h2>About The Browser</h2>
<big>
<script type="text/javascript">
1 var BrowserName= navigator.appName;
2 var BrowserVersion = navigator.appVersion;
3 var BrowserAgent= navigator.userAgent;
var platform=navigator.platform;
document.write("<b>The Browser's name is:</b> " +
BrowserName + "<br />");
document.write("<b>The Browser version is:</b> " +
BrowserVersion + "<br />");
document.write("<b>The Browser's \"user agent\" is:</b> " +
BrowserAgent + "<br />");
document.write("<b>The Browser's platform is:</b> " +
platform + "<br />");
</script>
</big>
</body>
</html>
E X P L A N A T I O N
1 The navigator object’s appName property is the browser’s name.
2 The navigator object’s appVersion property is the version of the browser.
3 The userAgent property refers to the HTTP user-agent header sent from the
brows-er to sbrows-ervbrows-er
Trang 7complete JavaScript program ready to copy and paste into your editor Save it as a js file
and then include it in your JavaScript code as shown in Example 10.3 The script creates
a literal JavaScript object called BrowserDetect and defines a number of methods to
detect your browser’s name, version, and operating system The code is fully explained
by the author At this point in your JavaScript experience, you should be able to read the
script and understand the explanations provided
To display the results, the following function was added to the list of methods
pro-vided by the original script:
printResults: function display(){
document.write("<b>This browser is "+BrowserDetect.browser);
document.write( " version "+ BrowserDetect.version + ".<br />");
document.write("The Operating System is "+ BrowserDetect.OS +
"</b>.<br />");
}
Figure 10.8 Browser properties (Example 10.2).
E X A M P L E 1 0 3
1 <script type="text/javascript" src="browser_sniffer_real.js">
</script>
<script type="text/javascript">
2 BrowserDetect.init();
3 BrowserDetect.printResults();
</script>
E X P L A N A T I O N
1 The source file is a js file, downloaded from http://www.quirksmode.org/js/detect.html.
2 The init() method for the BrowserDetect object sets the properties: browser, version
and OS for the browser you are using to view the output.
Continues
Trang 8Detecting Plug-Ins. Plug-ins are special software programs that can be downloaded
to add the ability to listen to audio, watch videos and movie clips, display animation,
and create special image viewing files Some examples of plug-ins are Macromedia
3 The printResults() method, shown here, was added to this script, to show the
val-ue of the properties set for the BrowserDetect object; that is, the name of the
browser, its version number, and the operating system Output examples are
shown in Figures 10.9, 10.10 and 10.11
Figure 10.9 The output from Example 10.3 shown in Firefox.
Figure 10.10 The output from Example 10.3 shown in Opera.
Figure 10.11 The output from Example 10.3 shown in Internet Explorer.
E X P L A N A T I O N (C O N T I N U E D)
Trang 9Shockwave or Flash player, Adobe Acrobat Reader, and RealNetworks RealPlayer
Plug-ins can be platform dependent and their MIME types can vary as well If you are using
Firefox, go to the Tools menu and select Addons to get more information about the
plug-ins supported on your client If using Internet Explorer, you will find the plugplug-ins[] array
is empty You can manage add-ons by going to the Internet Explorer Tools menu and
clicking Manage Add-ons
The plugins[] array of the navigator object (starting with Navigator 3) contains a
com-plete list of installed plug-ins and can be numerically indexed to see all plug-ins installed
for this browser Each element of the plugins[] array represents a plugin object The
prop-erties of the plugin object are shown in Table 10.2 When you use the HTML <embed>
tag in a document, you are creating a plugin object Each instance of the <embed> tag
cre-ates another object (see <embed> and <object> tags for embedding objects on page 281,
Example 10.5)
Table 10.2 Properties of the plugin Object
description A description of the plug-in.
filename The disk file name of the plug-in.
length The number of elements in the plugins[] array.
name The name of the plug-in.
E X A M P L E 1 0 4
<script type="text/javascript">
// No plug-ins for Windows IE Firefox uses this program.
1 var num_of_plugins = navigator.plugins.length;
2 for (var i=0; i < num_of_plugins; i++) {
var number=i+1;
document.write("<font color=red>Plug-in No." +
3 number + "- </font>"+navigator.plugins[i].name+"
<br />[Location: " + navigator.plugins[i].filename + "]<p>");
}
4 alert("\nYou have " + number + " plug-ins installed!")
</script>
E X P L A N A T I O N
1 The length property specifies the number of elements in the plugins[] array If
us-ing Internet Explorer for Windows, then you will need to use the HTML <object>
tag and identify a class ID
2 The plugins[] array consists of a list of plug-ins that have been installed in this
brows-er The for loop is used to go through the array, one by one, listing each plug-in
Continues
Trang 10What Is ActiveX? Instead of plug-ins, Microsoft has something called ActiveX
con-trols.1 ActiveX controls are used as a means to embed objects or components into a Web
3 The plug-in is listed by name The file name of the plug-in is displayed
4 The alert lets you know how many plug-ins are installed (see Figure 10.12)
Figure 10.12 A list of plug-ins for Firefox.
1 FF ActiveX Host can run ActiveX controls in Mozilla Firefox for Windows Mozilla ActiveX Control was
last updated in late 2005, and runs in Firefox 1.5.
E X P L A N A T I O N (C O N T I N U E D)
Trang 11page Online spreadsheets, security updates, word processors, patches, and timers are
examples of such components The plug-ins we describe here are ActiveX controls and can
be downloaded from vendor sites on the Internet You can add ActiveX controls to your
Web pages by using the standard HTML <object> tag The <object> tag takes a set of
param-eters that specify which data the control should use and defines its appearance and
behav-ior For details, see the Active X Web page, Figure 10.13 (http://msdn.microsoft.com).
Figure 10.13 ActiveX Web page.
E X A M P L E 1 0 5
<html>
<body>
<! This file works with both Internet Explorer and Firefox >
<h2>Flash swf file As Object</h2>
1 <object
width="250" height="100"
2 classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
3 codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
4 <param name="SRC" value="Spring.swf">
5 <embed src="Spring.swf"></embed>
6 </object>
</body>
<! http://ptgmedia.pearsoncmg.coml/images/0201716143/
files/files.htm >
</html>
Trang 12What Are MIME Types? MIME stands for Multipurpose Internet mail extensions.2
It is a standard format for sending mail messages across the Internet Now it is used to
exchange all kinds of file types across the Internet, such as audio, video, and image files
All browsers have a list of MIME types JavaScript 1.1 implemented the mimeType object
E X P L A N A T I O N
1 The HTML <object> tag allows you to embed an Active X control directly with the
HTML file
2 The classid attribute uniquely identifies the Active X control This is the unique
ID for Shockwave Flash
3 The codebase specifies the version number of the Active X control, in this
exam-ple, Shockwave Flash is version 8 (This line was broken to fit the page If you
copy this file, put the codebase value on one line.)
4 The param attribute has the name/value pair to identify the source for the swf
(pronounced “swiff” or “swoof”), the Flash file that will be displayed on the page
The file is an animation with audio
5 The <embed> tag gives the location of a data file that the plug-in should handle It
is included here for Mozilla type browsers because the <object> tag is only
recog-nized by Internet Explorer
6 The ActiveX control is closed with the </object> tag
(See http://msdn.microsoft.com/library/default.asp?url=/workshop/
components/activex/activex_ovw_entry.asp for a tutorial on ActiveX.) See Figure
10.14
Figure 10.14 Embedded Flash file and the <Object> tag.
2 Available with NN3+ and IE5+ on the Mac, but not on Windows Internet Explorer.