Scripts diferentes para cada navegador

Vemos como incluir de uma maneira simples uma biblioteca de scripts diferentes para cada navegador.

Um dos maiores problemas que um programador encontra na hora de criar páginas com DHTML é lidar com os diferentes modelos de objetos que têm cada um dos navegadores, e cujas diferenças não só se dão com os navegadores das distintas companhias, como também entre a mesma companhia há diferenças na modalidade dos objetos dependendo das versões. Por exemplo, o modelo de objetos de Netscape 6 é diferente do modelo de objetos de Netscape 4.

Tudo isto nos cria o problema na hora de escrever scripts de ter que duplicar o código de cada uma das nossas funções dependendo do navegador que se utiliza. Devido à grande variedade de navegadores e versões disponíveis, isto faz com que nossas funções acabem sendo muito maiores e mais ilegíveis do que o esperado.

Uma solução para este problema é a criação de diferentes arquivos que contenham os scripts para cada um dos navegadores que existem, ligando no momento do carregamento da página com o arquivo de scripts do navegador e a versão que estamos utilizando. Desta forma, os scripts são muito mais simples já que um script se criará enfocado a uma só versão, e ademais, no caso de que saia no mercado um novo navegador com um modelo de objetos diferente, não teremos que mudar todos nossos scripts, simplesmente bastará modificar o script que detecta o navegador, e em seguida escrever um novo arquivo que contenha os mesmos scripts que os anteriores, mas com o novo modelo de objetos.

O seguinte código pretende ser um exemplo reduzido do anteriormente exposto.

Nosso objetivo será diferenciar entre Netscape e Internet Explorer, de forma que ao clicar sobre um único botão, apareça uma mensagem de alerta diferente dependendo do navegador que utilizarmos.

O primeiro passo é a criação dos diferentes arquivos que vão conter os scripts específicos para cada um dos navegadores. Em nosso caso serão dois arquivos, um que chamaremos Internet.js que conterá os scripts para Internet Explorer, e outro chamado Netscape.js que conterá os scripts para Netscape. O conteúdo de Internet.js será o seguinte:

function mostraAlerta(){
alert("Estou utilizando IE")
}

O conteúdo de Nescape.js será o seguinte:

function mostraAlerta(){
alert("Estou utilizando NS")
}

Por outro lado, no cabeçalho de cada uma das páginas, deveremos incluir um script que ligue a cada um dos navegadores, dependendo do que utiliza o usuário.

<script language="javascript">

ns=(document.layers)? true:false
ie=(document.all)? true:false

ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>"
ponIe="<script language='javascript1.2' src='internet.js'> <\/script>"

if (ns) {document.write(colocarNs)}
if (ie) {document.write(colocarIe)}

</script>

* Observem na contra-barra "\" colocada antes da barra "/"
em </script> nos document.write().

Por último incluímos no corpo da página um botão que chama à função que está definida dentro dos arquivos de scripts:

<input type="button" value="Clicar" onclick="mostraAlerta()">

De forma que a página fique com o seguinte aspecto:

<html>
<head>
<title>Untitled</title>
<script language="javascript">

ns=(document.layers)? true:false
ie=(document.all)? true:false

ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>"

ponIe="<script language='javascript1.2' src='internet.js'> <\/script>"

if (ns) {document.write(colocarNs)}

if (ie) {document.write(colocarIe)}

</script>

</head>

<body>

<form>
<input type="button" value="Clicar" onclick="mostraAlerta()">
</form>

</body>
</html>