WebReference.com - When You Can't Trust the Browser: the Lies Opera Tells (1/2)

[next]

When You Can't Trust the Browser

By Kenneth Tibbetts ([email protected])

I like Opera--the browser, not the musical spectacle. I like that it puts small demands on your hardware. I like that it displays Web pages quickly and accurately. I like that it has always been close to the standards suggested by the W3C, especially for CSS styles.

It is always worthwhile to preview pages in Opera. Opera is a little weak in event handling, and it has been slow to adopt the document object model. But in terms of page presentation, Opera shows a Web page the way it oughta look. It displays a great looking page, and it loads fast. And everybody likes the little guy.

The troubles I have with Opera, as a code writer, are all derived from a single bad habit of the browser. Opera is a little loose with the truth.

In fact, Opera tells lies.

Little Lies

When I write code for Web pages, I write the page with the dumbest browser in mind, and then add scripts for the clients that can use them. I use a kind of a sniffer tool called iz to get the information from the browser.

Without using a tool like iz, you can pre-condition every script to ask if the client supports some particular property or method: image objects, or layers, or whatever.

If (document.layers) or (document.images) return true, the condition is supported, and you can pass on to the next step in your script.

Or you can directly query the navigator object for its appName or userAgent string, or test it against a string you know:

if(navigator.appName.indexOf('Microsoft') != -1);

or

if(navigator.appName== 'Netscape');

or

if(navigator.userAgent.indexOf('Gecko')!=-1);

In the old days I would see if the app's name was Netscape or Microsoft, and then check the version number, and that was it. Now I use iz.

iz source

iz deals with the "Other Guy" in the Web page: the user, the client, the browser--the software that is translating and displaying your code. It's best to cultivate an amiable relationship with this character.

As the page writer, you have no idea who or what this guy is and what he is capable of, but you can ask a few questions.

function iz(what){
 if(!what) return navigator.appName+'; '+ navigator.userAgent;
// no arguments passed get the return case sensitive
 var agnt= navigator.userAgent.toLowerCase();
// otherwize the uA is made lower case for comparisons
 var wot=what.toLowerCase();
 switch (wot){
  case 'df': return !!(document.createDocumentFragment);
  case 'dom': return !!(document.createElement);
  case 'id': return !!(document.getElementById);
  case 'ie': return !!(agnt.indexOf('msie')!= -1);
  case 'moz': return !!(agnt.indexOf('gecko')!= -1);
  case 'agt': return agnt;
  default: return !!(agnt.indexOf(wot)!=-1);
 }
}

iz Comments

If you use iz with no argument, as

x=iz();

x gets the value of the browser's name and userAgent string, separated by a semicolon.

IE6 returns:

Microsoft Internet Explorer; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Netscape 6.2.1:

Netscape; Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1

Netscape Navigator:

Netscape; Mozilla/4.08 [en] (WinNT; U ;Nav)

Send it one of the constants (ID, DF, IE, MOZ and my favorite, DOM), and it returns true or false, depending on the results of the case statements that apply to the input string.

I take extra care with what gets returned from iz. I want to get a 'real' true or false, and not a null or an empty string. Prefixing !! to a condition test forces the true / false syntax to be returned.

iz('ID') tests for document.getElementById, and iz('DOM') returns true for document.createElement. IE and MOZ are shorthand for IE or a Mozilla browser.

Sending any other string, like iz('Mac') or iz('Opera') checks for the specified string in the userAgent string.

I ran up against Opera's little lie here--the user can present a fake id, claiming to be IE or Navigator. Your carefully crafted browser sniffer might as well be on break.

[next]

Created: April 1, 2002
Revised: April 1, 2002

URL: https://webreference.com/programming/javascript/operalies/