Cross-browser JavaScript

Actually it’s not usually the JavaScript itself that causes the problem (though there are different versions, which we’ll mention later), it’s references within the code to elements and properties of the Document Object Model (DOM) that cause everything to go wrong.

These references come into play when JavaScript is used for DHTML. You’ll find a full explanation of the DOM in our DHTML series. Navigator, particularly version 4, and Explorer build their DOMs in different ways – often totally opposing ways – with Explorer creating a hierarchy from the general down to the specific, and Navigator sometimes working the other way round.

So the properties and attributes of the two different DOMs must be referred to in different ways, otherwise you get a JavaScript error and either the code won’t run or it crashes the browser.

Of the two, Internet Explorer is much closer to the ideal and the natural model of the DOM. The old Netscape model will in time disappear.

There are other complications for fully compatible JavaScript on top of this major battle. There are many different platforms and operating systems. We have PCs, Apples and Unix computers. They run Windows, Linux, Solaris and MacOS operating systems. The browsers may be from Microsoft, Netscape or Opera.

These are only examples, the whole picture is even more complex, especially now we have mobile telephone Internet access, which uses WAP (Wireless Application Protocol).

On top of this, the basic languages are evolving. JavaScript started at version 1.0, and now is at version 1.5. Any application designed to use JavaScript 1.0 generally cannot run JavaScript 1.5. The reverse is generally easier – if an application can use JavaScript 1.5 then it is quite likely that it can use JavaScript 1.0.

The Wars

With IE4, Microsoft trod on a few feet. It added filters, multimedia controls and a fuller implementation of DHTML than its closest competitor, Netscape. Navigator 4 couldn’t interpret these, and Netscape had also developed it’s own version of DHTML, which was significantly different to Microsoft’s.

With IE5, NN4 was left floundering. NN5 was considered too ‘buggy’ to warrant a release, and so now we have NN6. NN6 has implemented a much fuller version of Internet languages, and so cross-browser issues might eventually dwindle to a more acceptable level. Having said that, the beta version of NN6 appears to reject code that was previously considered to be cross-browser, so life remains interesting.

The whole picture is very complicated, and it takes large corporations to be able to provide full Internet access to every platform and browser. But a small business/single user can ‘maximize the odds’ of writing code that works on the maximum number of systems.

Parsing

A classic way to deal with cross-browser issues is to parse the browser version identification (recognize its type) then add conditional statements to the code, so that only code written for that browser will be interpreted and other code will be ignored. Reading the navigator object of the DOM can do this. For example,

<HTML>
<HEAD>
<TITLE>Which Browser</TITLE>
<SCRIPT>
document.write(navigator.appName);
</SCRIPT>
</HEAD>
</HTML>

IE reports Microsoft Internet Explorer, Netscape reports Netscape.

A typical example is for CSS. IE created the style object, of which all elements have their own instance. NN4 allows styles, but treats the style as a property of the element.

e.g. for the code

<P ID=”Pred” STYLE=”color:red”>This is Red</P>

If we wish to display the style of the Pred element:

IE : alert(Pred.style.color);

NN : alert(document.ids[‘Pred’].color);

We can’t write:

<HTML>
<HEAD>
<TITLE>Double alert</TITLE>
<SCRIPT>
function go() {
alert(Pred.style.color);
alert(document.ids[‘Pred’].color);
}
</SCRIPT>
</HEAD>
<BODY onload=”go();”>
<P ID=”Pred” STYLE=”color:red”>This is Red</P>
</BODY>
</HTML>

IE5 displays one alert box, containing red, and then crashes, and NN4 fails to load the page. Disastrous. This is slightly unfair on NN, IE at least gets some valid code before it crashes, whereas NN is expected to understand IE code immediately, and so crashes immediately. Try switching the order of the alerts. Now IE crashes immediately.

Writing Cross-Browser Code

To avoid this, we determine which browser we are running, and then use this information.

We have to adapt the appName code slightly to detect the browser.

<HTML>
<HEAD>
<TITLE>Internal Browser Notification</TITLE>
<SCRIPT>
app=navigator.appName.substring(0,1);
alert(app);
</SCRIPT>
</HEAD>
</HTML>

IE reports M, NN reports N.

We can use this to write responsive code for both browsers.

<HTML>
<HEAD>
<TITLE>Cross Browser alert</TITLE>
<SCRIPT>
M=false;
N=false;
app=navigator.appName.substring(0,1);
if (app==’N’) N=true; else M=true;
function go() {
if (M) alert(Pred.style.color);
if (N) alert(document.ids[‘Pred’].color);
}
</SCRIPT>
</HEAD>
<BODY onload=”go();”>
<P ID=”Pred” STYLE=”color:red”>This is Red</P>
</BODY>
</HTML>

Now the code runs in both browsers.

Note that this line:

if (app==’N’) N=true; else M=true;

implicitly sets IE as a default browser for the code, i.e. there are only two types of browsers, Netscape, and everything else, which we give to Microsoft.

To set Netscape as the default browser use:

if (app==’M’) M=true; else N=true;

Page Selection

Some people prefer the page selection technique when they write cross-browser code. This involves sending the viewer to the page that has been written for their browser. This code can prove easier to debug and maintain.

This technique would use three pages instead of one. The first redirects the viewer to an appropriate page.

<HTML>
<HEAD>
<TITLE>Redirection</TITLE>
<SCRIPT>
app=navigator.appName.substring(0,1);
if (app==’N’) location.href=’redN.htm’;
else location.href=’redM.htm’;
</SCRIPT>
</HEAD>
</HTML>

Then we have two distinct pages for each browser.

redN.htm

<HTML>
<HEAD>
<TITLE>redN</TITLE>
<SCRIPT>
function go() {
alert(document.ids[‘Pred’].color);
}
</SCRIPT>
</HEAD>
<BODY onload=”go();”>
<P ID=”Pred” STYLE=”color:red”>This is Red</P>
</BODY>
</HTML>

redM.htm

<HTML>
<HEAD>
<TITLE>redM</TITLE>
<SCRIPT>
function go() {
alert(Pred.style.color);
}
</SCRIPT>
</HEAD>
<BODY onload=”go();”>
<P ID=”Pred” STYLE=”color:red”>This is Red</P>
</BODY>
</HTML>

This is only the beginning of cross-browser programming. If you consider all browsers and platforms and JavaScript versions, there’s a lot of code to write. We need to know all the variations for each system.

There’s certainly a need for more standardization, to avoid cutting people out of the Internet and to allow further progress to be made in a civilized method. It would be nice if the head honchos of all the relevant companies felt the same way.

Source :  webdevelopersjournal.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: