JavaScript Retrieving Browser Info
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Browser Info

//keywords for finding browser information
navigator.product
navigator.plugins
navigator.appName
navigator.appCodeName
navigator.mimeTypes
navigator.javaEnabled
navigator.appVersion
navigator.platform
navigator.language
navigator.userAgent
navigator.vendor
navigator.cookieEnabled

The following script is in the BODY of the html doc because it writes a message in html for the user to read.

EX 1: getting data <sample>

<body>
<script>

document.writeln(navigator.product);
document.writeln(navigator.plugins);
document.writeln(navigator.appName);
document.writeln(navigator.appCodeName);
document.writeln(navigator.mimeTypes);
document.writeln(navigator.javaEnabled);
document.writeln(navigator.appVersion);
document.writeln(navigator.platform);
document.writeln(navigator.language);
document.writeln(navigator.userAgent);
document.writeln(navigator.vendor);
document.writeln(navigator.cookieEnabled);

</script>
</body>

EX 2: organizing data by adding html tags and text <sample>

<body>
<script>

document.writeln("product: " + navigator.product + "<br>");
document.writeln("plugins: " + navigator.plugins + "<br>");
document.writeln("appName: " + navigator.appName + "<br>");
document.writeln("appCodeName: " + navigator.appCodeName + "<br>");
document.writeln("mimeTypes: " + navigator.mimeTypes + "<br>");
document.writeln("javaEnabled: " + navigator.javaEnabled + "<br>");
document.writeln("appVersion: " + navigator.appVersion + "<br>");
document.writeln("platform: " + navigator.platform + "<br>");
document.writeln("language: " + navigator.language + "<br>");
document.writeln("userAgent: " + navigator.userAgent + "<br>");
document.writeln("vendor: " + navigator.vendor + "<br>");
document.writeln("cookieEnabled: " + navigator.cookieEnabled + "<br>");

</script>
</body>

EX 3: organizing data by adding text <sample>

<body>
<script>

document.writeln("<span style='color:#FF0000;'>product:</span> " + navigator.product + "<br>");
document.writeln("<span style='color:#FF0000;'>plugins:</span> " + navigator.plugins + "<br>");
document.writeln("<span style='color:#FF0000;'>appName:</span> " + navigator.appName + "<br>");
document.writeln("<span style='color:#FF0000;'>appCodeName:</span> " + navigator.appCodeName + "<br>");
document.writeln("<span style='color:#FF0000;'>mimeTypes:</span> " + navigator.mimeTypes + "<br>");
document.writeln("<span style='color:#FF0000;'>javaEnabled:</span> " + navigator.javaEnabled + "<br>");
document.writeln("<span style='color:#FF0000;'>appVersion:</span> " + navigator.appVersion + "<br>");
document.writeln("<span style='color:#FF0000;'>platform:</span> " + navigator.platform + "<br>");
document.writeln("<span style='color:#FF0000;'>language:</span> " + navigator.language + "<br>");
document.writeln("<span style='color:#FF0000;'>userAgent:</span> " + navigator.userAgent + "<br>");
document.writeln("<span style='color:#FF0000;'>vendor:</span> " + navigator.vendor + "<br>");
document.writeln("<span style='color:#FF0000;'>cookieEnabled:</span> " + navigator.cookieEnabled + "<br>");

</script>
</body>

NOTE: Some browsers hide their identity by returning values equal to Netscape or MSIE, Safari being one of them. Browser detecting with navigator.appName alone will not be entirely accurate. <ref: quirksmode.org> For true browser detection, check out the script on this page: http://www.quirksmode.org/js/detect.html (about half-way down the page).

The following script is in the HEAD of the html doc because it automatically directs the user to a specific site based on the navigator.appName. <sample>

EX 4:

<head>
<script>

if (navigator.appName == "Netscape") {
location.replace("http://cia.edu")
} else if (navigator.appName == "Microsoft Internet Explorer") {
location.replace("http://syr.edu")
} else {
document.write("You're not running Netscape or IE - maybe you should?")
}

</script>
</head>

NOTE: Safari returns NETSCAPE as a value so it will trigger the first part of the if statement.