By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

How do I reference <HTML> element via Javascript?

P: 12
This is bugging me: how do I reference the topmost node (HTML) within a document? I'd like to set a class on it, which specifies various browser/os/versions so that several browser/os/version-specific css bugs may be addressed without coding. eg: <HTML class="_IE _IE7 _Win _IE7Win">

The closest I've come is document.body.parentNode (line 22, below), but this of course requires that my script be executed from within body... I'd prefer to execute from within HEAD, while the document is still loading.

The code is below. In a nutshell, it does a quick browser detect, writes the findings out to several classes, then erases itself from memory as it is no longer needed. Also, I think this is the only detection script out there that correctly associates Safari Build Versions with the corrresponding Safari Release Version, since there's no way to get the actualy release version from within Safari (way to go, Apple!).



Expand|Select|Wrap|Line Numbers
  1. (function(){
  2.     var maj = Math.floor;
  3.     var BrowserDetect = {
  4.         init: function () {
  5.             this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  6.             this.version = this.searchVersion(navigator.userAgent)
  7.                 || this.searchVersion(navigator.appVersion)
  8.                 || "an unknown version";
  9.             this.OS = this.searchString(this.dataOS) || "an unknown OS";
  10.  
  11.             if(this.browser == "Safari") {
  12.                 this.build = this.version
  13.                 this.version = this.searchSafariBuilds(this.version, this.dataSafariBuild)
  14.             }
  15.             // add special class for css
  16.             var clientClass= "_"+this.browser;
  17.             var clientVersionClass= "_"+this.browser+maj(this.version)
  18.             var clientVersionOSClass= "_"+this.browser+maj(this.version)+this.OS
  19.             var osClass= "_"+this.OS;            
  20.  
  21.             myClasses = clientClass + " " + clientVersionClass + " " + osClass + " " + clientVersionOSClass;        
  22.             document.body.parentNode.className= myClasses; 
  23.         },
  24.         searchString: function (data) {
  25.             for (var i=0;i<data.length;i++)    {
  26.                 var dataString = data[i].string;
  27.                 var dataProp = data[i].prop;
  28.                 this.versionSearchString = data[i].versionSearch || data[i].identity;
  29.                 if (dataString) {
  30.                     if (dataString.indexOf(data[i].subString) != -1)
  31.                         return data[i].identity;
  32.                 }
  33.                 else if (dataProp)
  34.                     return data[i].identity;
  35.             }
  36.         },
  37.         searchVersion: function (dataString) {
  38.             var index = dataString.indexOf(this.versionSearchString);
  39.             if (index == -1) return;
  40.             return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  41.         },
  42.  
  43.         searchSafariBuilds : function (vers, data) {
  44.             /* Safari uses internal "build number" instead of a release number, 
  45.             so this translates for us non-apple-employees.*/
  46.             vers = Number(vers.toString().split(".",2).join("."))
  47.             var releaseVersion = "Unknown";
  48.             for (var i=0;i<data.length;i++)    {
  49.                 if(vers > data[i].Safari){ 
  50.                     releaseVersion = data[i].Version; 
  51.                 }
  52.             }
  53.             return releaseVersion;
  54.         },
  55.  
  56.         dataBrowser: [
  57.             {     string: navigator.userAgent,
  58.                 subString: "OmniWeb",
  59.                 versionSearch: "OmniWeb/",
  60.                 identity: "OmniWeb"
  61.             },
  62.             {
  63.                 string: navigator.vendor,
  64.                 subString: "Apple",
  65.                 identity: "Safari"
  66.             },
  67.             {
  68.                 prop: window.opera,
  69.                 identity: "Opera"
  70.             },
  71.             {
  72.                 string: navigator.vendor,
  73.                 subString: "iCab",
  74.                 identity: "iCab"
  75.             },
  76.             {
  77.                 string: navigator.vendor,
  78.                 subString: "KDE",
  79.                 identity: "Konqueror"
  80.             },
  81.             {
  82.                 string: navigator.userAgent,
  83.                 subString: "Firefox",
  84.                 identity: "FF"
  85.             },
  86.             {
  87.                 string: navigator.vendor,
  88.                 subString: "Camino",
  89.                 identity: "Camino"
  90.             },
  91.             {        // for newer Netscapes (6+)
  92.                 string: navigator.userAgent,
  93.                 subString: "Netscape",
  94.                 identity: "NS"
  95.             },
  96.             {
  97.                 string: navigator.userAgent,
  98.                 subString: "MSIE",
  99.                 identity: "IE",
  100.                 versionSearch: "MSIE"
  101.             },
  102.             {
  103.                 string: navigator.userAgent,
  104.                 subString: "Gecko",
  105.                 identity: "Moz",
  106.                 versionSearch: "rv"
  107.             },
  108.             {         // for older Netscapes (4-)
  109.                 string: navigator.userAgent,
  110.                 subString: "Mozilla",
  111.                 identity: "NS",
  112.                 versionSearch: "Mozilla"
  113.             }
  114.         ],
  115.         dataOS : [
  116.             {
  117.                 string: navigator.platform,
  118.                 subString: "Win",
  119.                 identity: "Win"
  120.             },
  121.             {
  122.                 string: navigator.platform,
  123.                 subString: "Mac",
  124.                 identity: "Mac"
  125.             },
  126.             {
  127.                 string: navigator.platform,
  128.                 subString: "Linux",
  129.                 identity: "Linux"
  130.             }
  131.         ],
  132.  
  133.         dataSafariBuild :  [
  134.  
  135.             {Version: ">1.0",    Webkit: 0.0,   Safari: 0.0},
  136.             {Version: "1.0",    Webkit: 85.0,   Safari: 85.0},
  137.             {Version: "1.0.2",  Webkit: 85.7,   Safari: 85.7},
  138.             {Version: "1.0.3",  Webkit: 85.8,   Safari: 85.8},
  139.             {Version: "1.1",    Webkit: 100,    Safari: 100},
  140.             {Version: "1.1.1",  Webkit: 100,    Safari: 100.1},
  141.             {Version: "1.2.2",  Webkit: 125.2,  Safari: 125.7},
  142.             {Version: "1.2.2",  Webkit: 125.2,  Safari: 125.8},
  143.             {Version: "1.2.3",  Webkit: 125.4,  Safari: 125.9},
  144.             {Version: "1.2.3",  Webkit: 125.5,  Safari: 125.9},
  145.             {Version: "1.2.4",  Webkit: 125.5,  Safari: 125.11},
  146.             {Version: "1.3",    Webkit: 312.1,  Safari: 312},
  147.             {Version: "1.3.1",  Webkit: 312.5,  Safari: 312.3},
  148.             {Version: "1.3.2",  Webkit: 312.8,  Safari: 312.5},
  149.             {Version: "1.3.2",  Webkit: 312.8,  Safari: 312.6},
  150.             {Version: "2.0",    Webkit: 400,    Safari: 400},
  151.             {Version: "2.0.1",  Webkit: 412.7,  Safari: 412.5},
  152.             {Version: "2.0.2",  Webkit: 416.11, Safari: 416.12},
  153.             {Version: "2.0.2",  Webkit: 416.12, Safari: 416.13},
  154.             {Version: "2.0.3",  Webkit: 417.9,  Safari: 417.8},
  155.             {Version: "2.0.3",  Webkit: 417.9,  Safari: 417.9},
  156.             {Version: "2.0.3",  Webkit: 418,    Safari: 417.9},
  157.             {Version: "2.0.4",  Webkit: 418.8,  Safari: 419.3},
  158.             {Version: "2.0.4",  Webkit: 418.9,  Safari: 419.3},
  159.             {Version: "2.0.4",  Webkit: 419,    Safari: 419.3},
  160.             {Version: "2.0.4",  Webkit: 419.3,  Safari: 419.3},
  161.             {Version: "3.0",    Webkit: 500,    Safari: 500},
  162.             {Version: "3.0.3",  Webkit: 522,    Safari: 522},
  163.             {Version: "3.0.4",  Webkit: 523.10, Safari: 523.1},
  164.             {Version: "4.0",    Webkit: 600.0,  Safari: 600.0}
  165.         ]
  166.     }
  167.     BrowserDetect.init()
  168.  
  169. })();
  170.  
  171.  
  172.  

(Original code is based off of http://www.quirksmode.org/js/detect.html, with my additions being the self-termination and Safari version detection.)
Nov 2 '07 #1
Share this Question
Share on Google+
3 Replies


100+
P: 428
document.documentElement refers to the html root element.


Your browser sniffer could lose some weight.

Expand|Select|Wrap|Line Numbers
  1. navigator.whozit=function () {
  2.     var N= navigator.appName;
  3.     var ua= navigator.userAgent, M;
  4.     if (/opera/i.test(ua)) {
  5.         M= ua.match(/(opera)\/? *(\.?\d+(\.\d+)*)/i);
  6.     }
  7.     else {
  8.         M= ua.match(/(applewebkit|firefox|seamonkey|netscape)\/ *(\.?\d+(\.\d+)*)/i);
  9.         if (M) {
  10.             if (/safari/i.test(ua))  M[1]= "Safari";
  11.             var tem= ua.match(/version\/(\.?\d+(\.\d+)?)/i);
  12.             if (tem)  M[2]= tem[1];
  13.         }
  14.         else  M= ua.match(/ms(ie) *(\d+(\.\d+)*)/i);
  15.     }
  16.     M= M ? [M[1], M[2]] : [N, navigator.appVersion];
  17.     M[0]= M[0].length > 2 ? M[0].capit(true) : M[0].toUpperCase();
  18.     return M;
  19. }
//test case
alert(navigator.whozit())
Nov 2 '07 #2

acoder
Expert Mod 15k+
P: 16,027
In a nutshell, it does a quick browser detect, writes the findings out to several classes, then erases itself from memory as it is no longer needed.
...[snip]
(Original code is based off of http://www.quirksmode.org/js/detect.html, with my additions being the self-termination and Safari version detection.)
I'm just wondering what purpose this serves? Is it just a test project?
Nov 2 '07 #3

P: 12
It started out as an experiment but now we're looking into using it to help address numerous VERY specific browser bugs; for instance turning off certain features in safari mac 2.0.0.6 but leaving them on in 2.0 and 3.0.

I realize the code is a little bloated but part of the requirement is that a team of people with only minimal coding skills will be taking over the project eventually; therefore it's clearer to keep everything in data tables rather than using RegExps, and to use CSS flags in the body of the beast rather than rely on inline calculations.
Nov 13 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.