A Guide to Coding Cross-Browser Scripts

acoder

It's strange, isn't it? After so many years of standards, you would've thought that you could write a simple piece of script that would work in all browsers. Alas, this is not always the case. With browsers adding their own proprietary stuff and actually failing to implement standards (one, in particular, being quite notorious), it just makes things harder than they should be.

However, it's not all bad. You can still write scripts which work in pretty much all browsers. OK, I'll qualify that - all modern browsers.

Having seen some of the horrible proprietary code still floating around, I thought it would make sense to have a collection of short articles that help to write code that can work in all browsers. This should include general guidelines and code snippets.

In Part 1 - Browsers and Standards, we discuss why browser detection should be avoided, why object detection should be used and why we should use standards.

The W3C and Microsoft event object models are very different. In Part 2 - Event Normalization, volectricity describes how you can normalize them.

acoder

I've added your articles as Part 2 - Event Normalization. Thanks volectricity.

trbjr

Hi Acoder,

I found your idea and response from volectricity helpful, interesting and instructive.
May I ask (without being utterly dumb) that you post a link to the standards you refer to.

A google of "javascript standards" gives many hits. The purpose of my using this forum is to gain access to the experience of others, so it would be really helpful to be able to link to the site that reflects the standards you mean. I know about a few, but my lack of experience makes me wonder about a comprehensive source.

Hope this makes sense to you.

Thanks for the article as far as it has gone.

Best,

trbjr

Plater

Been hunting around for hours for best ways to do cross browser for xmlHTTPRequest object and found a usefull snipit:

Expand|Select|Wrap|Line Numbers

 
/*@cc_on @if (@_win32 && @_jscript_version >= 5) 

   if (!window.XMLHttpRequest) 

      function XMLHttpRequest() 

      { 

         return new ActiveXObject('Microsoft.XMLHTTP') 

      } 

@end @*/

This allows you to simpley use:

Expand|Select|Wrap|Line Numbers

var myhttp = new XMLHttpRequest();

in most browsers (Even in IE5 and later)
(I borrowed it from here)

It doesn't deal with the netscape securities, but that can be dealt with later.

Plater

As an after thought, I made this:

Expand|Select|Wrap|Line Numbers

 
if (!document.getElementById)

{

    document.prototype.getElementById = function() 

    {

        if (document.all)

        {

            return document.all[id];

        }

        else if (document.layers)

        {

            return document.layers[id]; 

        }

    }

}

But I have no idea what browser to use that DOESN'T have getElementById() to test it out on

kovik

Quote:

Originally Posted by Plater

But I have no idea what browser to use that DOESN'T have getElementById() to test it out on

By today's standards, we can ignore any browser that does not support getElementById(), and this has safely been the case for over a year now.

And for creating the AJAX object, the "best" method would include try...catch statements, as failed object creation throws and exception. Even if the browser supports it does necessarily mean that it will be created properly, and not every browser supports AJAX. Mozilla and Microsoft were ahead of the game with AJAX technologies. If course, the snippet you posted before the last one could be incorporated into the try...catch, but a more "standardized" method would be:

Expand|Select|Wrap|Line Numbers

 function GetRequestObject()

{

    try

    {

        return new XMLHttpRequest();

    }

    catch($e)

    {

        try

        {

            return new ActiveXObject('Microsoft.XMLHTTP');

        }

        catch($e)

        {

            return null; // The request object could not be created

        }

    }

}

acoder

Quote:

Originally Posted by trbjr

Hi Acoder,

I found your idea and response from volectricity helpful, interesting and instructive.
May I ask (without being utterly dumb) that you post a link to the standards you refer to.

A google of "javascript standards" gives many hits. The purpose of my using this forum is to gain access to the experience of others, so it would be really helpful to be able to link to the site that reflects the standards you mean. I know about a few, but my lack of experience makes me wonder about a comprehensive source.

Hope this makes sense to you.

Thanks for the article as far as it has gone.

Best,

trbjr

For the DOM, you can see the W3C DOM (warning: not an easy read).

As for Javascript (or ECMAScript), see the language specification.

acoder

Quote:

Originally Posted by acoder

For the DOM, you can see the W3C DOM (warning: not an easy read).

As for Javascript (or ECMAScript), see the language specification.

Added these links and others to the main article.

acoder

Quote:

Originally Posted by Plater

But I have no idea what browser to use that DOESN'T have getElementById() to test it out on

You'd be looking at the old buggy browsers at the height of the first browser war: IE4 and Netscape 4.

A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

re: A Guide to Coding Cross-Browser Scripts

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

/bytes/about