« Arduino on Windows Vista | Main | XML fashion »

14/12/2008

Internet Explorer, Firefox & javascript

Recentemente resolvi que precisava de uma página web onde eu pudesse comutar entre duas línguas na mesma página sem ter de recarregar a página. Coloquei cada língua em um div sendo um deles invisível e usei um javascript para comutar entre uma língua e outra. O desenho básico desta página seria o seguinte:

<html>
    <script type="text/javascript">
    function set_lang(lang)
    {
        var oPort = document.getElementById('pt');
        var oEng = document.getElementById('en');

        var sDisplay = 'display:block';
        var sNoDisplay = 'display:none';
        if (lang=='en')
        {
            oPort.setAttribute("style", sNoDisplay);
            oEng.setAttribute("style", sDisplay);
        }
        if (lang=='pt')
        {
            oPort.setAttribute("style", sDisplay);
            oEng.setAttribute("style", sNoDisplay);
        }
    }
    </script>
    <body>
        <div style="text-align:center">
            <a href="javascript:set_lang('en')">English</a>&nbsp;
            <a href="javascript:set_lang('pt')">Português</a>
        </div>

        <div id="pt" >
            Texto em português.
        </div>
        <div id="en" style="display:none">
            Text in english.
        </div>
    </body>
</html>

Depois de alguns dias percebi que isso não funcionava em nenhuma versão do Microsoft Internet Explorer. Depois de alguns testes e alguma pesquisa descobri que o setAttribute do IE não funciona em estilos e classes [Nye2005]. Isso realmente me surpreendeu, eu achava que a época onde erros tolos como esse, que prejudicassem o funcionamento entre browsers tivesse passado há muito tempo. Muito contrariado mudei meu javascript para:

function set_lang(lang)
{
   var oPort = document.getElementById('pt');
   var oEng = document.getElementById('en');

   var sDisplay = 'display:block';
   var sNoDisplay = 'display:none';

   if (lang=='en')
   {
      oPort.style.cssText = sNoDisplay;
      oEng.style.cssText =  sDisplay;
   }
   if (lang=='pt')
   {
      oPort.style.cssText = sDisplay;
      oEng.style.cssText = sNoDisplay;
   }
}

E agora ele funciona no Firefox, Chrome, e IE. A princípio eu achei isso uma imensa falha do Microsoft Internet Explorer, mas resolvi pesquisar um pouco mais, e em vários lugares encontrei justificativas para isso, de fato não se trata de um erro, mas do fato de que a Microsoft insiste em ser diferente, basta ver as definições do W3C e uma lista de características compatíveis para cada browser, e você verá que o IE na maioria das vezes é o único diferente, mesmo em coisas que até o Konqueror e o Opera suportam [Koch2008], de quem é a culpa então?

Referências

[Nye2005]: NYE, Dan. Bug Report: setAttribute does not work when used with the style attribute. Disponível em: <http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html>. Acesso em: 13 jan. 2009.

[Koch2008]: KOCH, Peter-Paul. W3C DOM Compatibility - CSS. Disponível em: <http://www.quirksmode.org/dom/w3c_css.html>. Acesso em: 13 jan. 2009.

[Goodman2002]: GOODMAN, Danny. Dynamic HTML: The Definitive Reference. 2nd ed. Sebastopol, CA: O’Reilly, 2002.

Posted at 21:37 in Computadores |

Comments