Leandro Vieira Pinho´s Blog

Diferenças entre os browsers ao interpretar JavaScript #1

December 21st, 2006. Published under IE, crossbrowser, firefox, javascript, opera. 2 Comments.

Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui
Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = objLink.getAttribute('rel');
	// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
	alert('Tipo: ' + typeof(objLinkAttRel));
}

Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:

• Tipo: string = Internet Explorer 6
• Tipo: object = Firefox 2.0.0.1
• Tipo: object = Opera 9

Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:

...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
	// Faz alguma coisa
}

Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores - como o Firefox e o Opera - você terá uma mensagem de erro - objLinkAttRel has no properties. Isto por que você está utilizando um método - substring - para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.

Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
	if ( objLinkAttRel.substring(0,3) == 'foo' ) {
		// Faz alguma coisa
	}
}
}

Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser