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

Programmer / Writer
Aquent
US-WA-Redmond

Justtechjobs.com Post A Job | Post A Resume
Developer News
Cisco Lawsuit: A Test for the GPL?
Shifts for Enterprise Linux, Green Networks in '09
Gifts for All in Linux 2.6.28

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.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

webref The latest from WebReference.com Browse >
An Introduction to 3D · Email Marketing Terms to Know · Search Engines 101: Paid Vs. Natural Search
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Mastering SSH: Connecting, Executing Remote Commands and Using Authorized Keys · Connecticut Town Lays Groundwork for Merged School, Municipal VoIP Network · Wi-Fi for your Car, Truck, or MPV

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

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