Jaffa Presentation - Cross Browser Coding

Home Contact Us FAQs Site Map

Source Forge:

Jaffa Site
news introduction documentation javadocs downloads contributors acknowledgements mail lists legal

Jaffa Runtime
TagLib Guide Presentation Middleware Business Logic Persistence Security Configuration

Jaffa RAD
Getting Started Standards Build Tools Generation Engine Domain Generation Component Generation Application Generation Load Testing

Sub-Projects
SampleApp Together TextPad

Browser Compatability Issues (Netscape 7 vs Mozilla vs IE 6)

Event Model
Netscape has a different mechanism for catching events on the document level. Instead of using IE's `document.attachEvent(event,method)` Netscape uses `document.addEventListener(event,method,Boolean)`.

Capturing Event Element
When interrogating the event element there are some differences between the DOM. Instead if being `event.srcElement`, netscape uses `e.target`.

InnerText

InnerText is NOT supported by Netscape. For netscape use the following code...

var str = ""
for (var i=0; i<el.childNodes.length; i++) {
  switch (el.childNodes.item(i).nodeType) {
    case 1: //ELEMENT_NODE
      str += getInnerText(el.childNodes.item(i));
      break;
    case 3: //TEXT_NODE
       str += el.childNodes.item(i).nodeValue;
       break;
  }
}

DOM manipulation

IE and Mozilla share a similar DOM structure, but Netscape differs in relation to how it interprates it's child nodes. For example look at the following code.

IE interoperates the following code theadrow = e.srcElement.parentElement; whereas Netscape and Mozilla use the following code theadrow = e.target.parentNode;

Although Netscape supports document.getElementById('id') .. it does NOT support any of the other element code. You must use node manipulation instead

For example colCount = theadrow.children.length; brings back the length of an array of all the children in IE but you would have to use the following code in Netscape and Mozilla is colCount = theadrow.cells.length;.

Browser Detection Javascript

The JAFFA framework was written to support the following browsers , IE 5.5 and up , Mozilla 1.3 , and Netscape 6 and up. When building an application you may want to drop this script into your page to detect browser version. We suggest that you may want to steer them then to an applicable download page.

<Script Language="JavaScript">
    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);
    // Note: Opera and WebTV spoof Navigator.  We do strict client detection.
    // If you want to allow spoofing, take out the tests for opera and webtv.
    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_gecko = (agt.indexOf('gecko') != -1);
    var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
    var is_ie6    = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
    var is_ie6up  = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);
    if (is_nav6up || is_gecko || isie5_5up) {
    } else {
       window.location="http://www.microsoft.com/downloads/";
    }
</script>

Links