[thelist] Browser Detect with JavaScript

Sat Dec 2 18:00:28 CST 2000

Hi Michael

> thanks for the reminder. So basically if a Web browser can pass the
> test of understanding the w3c DOM or at least the IE4 "all" version
> of the DOM then I can consider that browser will be capable of
> displaying my CSS1 site with perhaps only a few problems.

Well sort of ie3 has css1 support.
What the script does is check whether is document is scriptable by using the
various 'dom' objects made available with browsers versions .

> So thus, I could present a warning message to users with my
> revised script:
>
> function brwcheck() {
>
>    //The default is set to false (incompatible),
>    var resultck=false;
>
>    //then all approved/compatible browsers are set to true
>    //DOM1 compliance ns6 and ie5 and anytime soon opera 4+
>    if(document.getElementsByTagName){resultck=true;}
>
>    //ie4 all DOM
>    if (document.all){resultck=true;}
>
>    if(resultck==false){
>      document.write('Please check that you are using a supported
> Web browser');
>    }
> }
>

Opps I Actually I forgot to add 'document.layers' in the script to detect
ns4+ use of it's  'layers' object
and made another typo and  ie5 should have been ie4. Not enough coffee,
sloopy typing, too rushed etc etc..sorry bout dat.

So this is how it should have been written.

function domDetect(){
if(document.getElementsByTagName)
   {//DOM1 compliance ns6 and ie5 and soon opera 4+
   return 'dom';
   }
if (document.all)
   {//ie4  dom and opera spoofer
   return 'ie4';
   }
if (document.layers)
   {//ns4 dom
   return 'ns4';
   }
if(document.images)
 {//pre4 limited dom images support.
 return 'pre4';
 }
return 'noDom';
}

> Then put in document where you want message displayed:
> <script language="JavaScript" type="text/javascript">
> brwcheck();
> </script>
>
> That certaintly simplifies things! And also allows other unknown
> browsers in as long as they conform to the standards.
>
> Just to check, using this will IE 4.5 browsers get the warning?
>
> If I want to also allow Netscape 4.7 and 4.08 (and not any other
> prior versions of Netscape 4) then I could insert the following
> before I do the final check on whether to put up a warning message:

The revised script will do this.
so to detect pre4 support you would go

if(domDetect() == 'pre4' )
 {
 //do something with a pre4
 alert(domDetect())
 }

the granularity can also be reversed

if(domDetect() !== ( 'dom'  || 'ie4' || 'ns4'))
 {
 //do something else with other browsers
 alert(domDetect())
 }

Likewise when dom level2 support becomes more prevalent I would add.

if(document.Event)
   {//DOM2 compliance
   return 'dom2';
   }

An example of dom detection which works for ns6 and ie5 but degrades 'ok' in
the pre5 pluses.
Note it's now possible to script with the 'w3cdom' in ns6 and ie5 without
any browser specific branching.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title></title>
<style type="text/css">
p{color:red}
</style>

<script type="text/javascript">

function domDetect(){
if(document.getElementsByTagName)
   {//DOM1 compliance ns6 and ie5 and anytime soon opera 4+
   return 'dom';
   }
if (document.all)
   {//ie4 all DOM
   return 'ie4';
   }
if (document.layers)
   {//ns4
   return 'ns4';
   }
if(document.images)
 {//pre4
 return 'pre4';
 }
 return 'preDom';
}

function changeP(param){
if(domDetect() == 'dom')
   {
   var pArr = document.getElementsByTagName('p')
   var max = pArr.length
   for(var i = 0;i < max;i++)
      {
      pArr.item(i).style.color = param
      }
   }
}
</script>
</head>
<body>
<p onmouseover="changeP('blue')">one</p>
<p onmouseover="changeP('black')">two</p>
<p onmouseover="changeP('red')">three</p>
</body>
</html>