raingod >> resources >> JavaScript >> Software >> Browser Properties  

Browser Properties [Source]

Last updated: 08.05.2002

This is the source code for the Browser Properties JavaScript, which displays information about the user's browser in the form of a table. To use this script, save it as plain text and paste it into your page.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
    // Write out some introductory blurb and begin the table.
    
    document.writeln('<TABLE WIDTH=470 ALIGN=CENTER><TR><TD><P CLASS="narrow">' +
                     'The table below shows the principal properties of your ' +
                     'browser - the name by which it identifies itself, and ' +
                     'the plug-ins supported. The final part of the table ' +
                     'lists all the document types for which a plug-in has ' +
                     'been defined, together with the name of the plug-in ' +
                     'that handles each type. Types for which no plug-in is ' +
                     'available are not shown.<' + '/P><HR><' + 
                     '/TD><' + '/TR><' + '/TABLE>');

    document.writeln('<TABLE CELLPADDING=2 CELLSPACING=1 BORDER=0 ' +
    				 'WIDTH=470 ALIGN=CENTER><TR>');
    document.writeln('<TH WIDTH=100 ALIGN=LEFT CLASS="small"' + 
    				 'BGCOLOR="#666699">Property<' + '/TH>');
    document.writeln('<TH WIDTH=100 ALIGN=LEFT CLASS="small"' + 
    				 'BGCOLOR="#666699">Variable<' + '/TH>');
    document.writeln('<TH WIDTH=100 ALIGN=LEFT CLASS="small"' + 
    				 'BGCOLOR="#666699">Value<' + '/TH><' + '/TR>');

    // Set up the variables we need to test the first few properties

    var number_of_values_to_test = 4;
    var name_array = new Array(number_of_values_to_test);
    var properties = new Array(number_of_values_to_test);
    name_array[0] = "Application Name";
    properties[0] = "appName";
    name_array[1] = "Code Name";
    properties[1] = "appCodeName";
    name_array[2] = "Version";
    properties[2] = "appVersion";
    name_array[3] = "User Agent";
    properties[3] = "userAgent";
    
    // Loop through the properties, outputting one table row for each one.
    
    for (var index=0;index < number_of_values_to_test;index++) {
        document.write('<TR><TD BGCOLOR="#9999CC" ALIGN=LEFT CLASS="small">' + 
        			   name_array[index] + '<' + '/TD>');
        document.write('<TD BGCOLOR="#CCCCFF" CLASS="small">' + properties[index] +
        			   '<' + '/TD>');
        document.write('<TD BGCOLOR="#CCCCFF" CLASS="small">' + 
        			   navigator[properties[index]] + '<' + '/TD>');
        document.writeln('<' + '/TR>');
    }
    
    // Write out details about the user's installed plug-ins
    
    document.write('<TR><TD BGCOLOR="#9999CC" ALIGN=LEFT CLASS="small">Plug-ins<' +
    			   '/TD>');
    document.write('<TD BGCOLOR="#CCCCFF" CLASS="small">plugins<' + '/TD>');
    document.writeln('<TD BGCOLOR="#CCCCFF" CLASS="small">');
    if (navigator.plugins != null) {
        for (var index=0;index < navigator.plugins.length; index++) {
            document.writeln(navigator.plugins[index].name + '<BR>');
        }
    }
    else {
        document.writeln("Browser doesn't recognise " +
        				 "'navigator.plugins' property.");
    }
    document.writeln('<' + '/TD><' + '/TR>');
    
    // Do the same for the MIME types. This is more complex, because we need to
    // build a subtable within our main table, showing the types, their names
    // and extensions, and the plug-in assigned to them.
    
    document.write('<TR><TD BGCOLOR="#9999CC" ALIGN=LEFT CLASS="small">' + 
    			   'MIME Types<' + '/TD>');
    document.write('<TD BGCOLOR="#CCCCFF" CLASS="small">mimeTypes<' + '/TD>');
    document.writeln('<TD BGCOLOR="#CCCCFF" CLASS="small">');
    if (navigator.mimeTypes != null) {
        document.writeln('<TABLE>');
        
        document.writeln('<TR BGCOLOR="#9999CC">' +
        				 '<TH CLASS="small" ALIGN=LEFT BGCOLOR="#9999CC">' +
        				 'MIME Type<' + '/TH>' +
        				 '<TH CLASS="small" ALIGN=LEFT BGCOLOR="#9999CC">' +
        				 'Identifier<' + '/TH>' +
        				 '<TH CLASS="small" ALIGN=LEFT BGCOLOR="#9999CC">' +
        				 'Extn.<' + '/TH>' +
        				 '<TH CLASS="small" ALIGN=LEFT BGCOLOR="#9999CC">' +
        				 'Plug-in<' + '/TH><' + '/TR>');
        
        for (var index=0;index < navigator.mimeTypes.length; index++) {
        if (navigator.mimeTypes[index].enabledPlugin != null) {
            document.write('<TR><TD CLASS="small" VALIGN=TOP>' + 
            			   navigator.mimeTypes[index].type +
                           '<' + '/TD><TD CLASS="small" VALIGN=TOP>' + 
                           navigator.mimeTypes[index].description +
                           '<' + '/TD><TD CLASS="small" VALIGN=TOP>' + 
                           navigator.mimeTypes[index].suffixes +
                           '<' + '/TD><TD CLASS="small" VALIGN=TOP>' + 
                           navigator.mimeTypes[index].enabledPlugin.name +
                           '<' + '/TD><' + '/TR>');
            }
        }
        document.writeln('<' + '/TABLE>');
    }
    else {
        document.writeln("Browser doesn't recognise " + 
        				 "'navigator.mimeTypes' property.");
    }
    document.writeln('<' + '/TD><' + '/TR>');
    
    // Finish up the table.
    
    document.writeln('<' + '/TABLE>');
// -->
</SCRIPT>