spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / sniffing / 2 To page 1current page
[previous]

Object Sniffing New Browsers, Part 2: Other Browsers

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


Putting it All Together

By this point you have an idea on how to go about detecting various browsers. But once you have that knowledge, how do you apply it so that you can do something useful with it? If, for example, you are looking to customize the layout of your Web page based on the CSS properties supported (or not supported) by particular browsers, you can use object detection to redirect the browser to the appropriate .css file using a simple set of if else statements in JavaScript.

In the following example code, we take the values (either "true" or "false") from the variables we set up and when a match is made, the appropriate .css stylesheet is selected.

<html>
<head>
<title>Object Sniffer Code for Netscape 6 and 7</title>
<script>
// netscape browsers
var is_nn6 = (navigator.product == 'Gecko') && (!window.find)?true:false;
var is_nn7 = (navigator.product == 'Gecko') && (window.find)?true:false;

if (is_nn6)
{document.write("<link rel=\"stylesheet\" href=\"nn6.css\"/>")}
else if (is_nn7)
{document.write("<link rel=\"stylesheet\" href=\"nn7.css\"/>")}
else
{document.write("<link rel=\"stylesheet\" href=\"default.css\"/>")}
</script>
</head>

<body>
The text on the page will be colored differently depending on which browser is used.
<ul>
<li>If Netscape 6 is being used, the text color will be orange
<li>If Netscape 7 is being used, the text color will be pink
<li>If something other than these browsers are used, the <em>background</em> color will be red
</ul>

Netscape (Gecko-based) browsers:<br>
<script>
document.write("Netscape 6: " + is_nn6 + "<br />");
document.write("Netscape 7: " + is_nn7 + "<br />");
</script>
</body>

</p>

</body>
</html>

Note that while we are searching only for the presence of Netscape 6 or 7, we have three separate .css files: nn6.css (containing the code "body {color: orange;}") which is a match for Netscape 6, nn7.css (containing the code "body {color: pink;}") which matches Netscape 7, and default.css (containing the code "body {background-color: red;}") which will a match any other browser that hits the page, such as Internet Explorer or Konqueror. The document.write statements contained in the body of the page displays the value of the is_nn6 and is_nn7 variables, which will either be true or false, and whose effects will already have been set into motion, turning the text either to orange or pink when Netscape 6 or 7 are used respectively, or turn the background to red if these browsers are not used to view the page. Compiled by Keith Schengili-Roberts

The writer wishes to acknowledge the work of Mark Wilton-Jones and his browser sniffing tutorial at http://www.howtocreate.co.uk/tutorials/jsexamples/sniffer.html, to which this article is indebted.

 

home / programming / javascript / sniffing / 2 To page 1current page
[previous]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: March 27, 2003
Revised: August 12, 2003

URL: URL: http://webreference.com/programming/javascript/sniffing/2