Sergio Abreu Quinta-feira, 24 de março de 2005

Javascript em navegadores diferentes

Olá pessoal. Este é meu primeiro artigo no iMasters e iremos abordar as diferenças que os mesmos objetos em javascript podem apresentar quando em navegadores diferentes.

Esse conhecimento é essencial para que um recurso da página sempre funcione, independente do browser onde a página for "rodada". Vários sites de e-mail estão utilizando IFRAME para criação de e-mails em RICHTEXT.

Neste artigo apresentarei duas coisas:

01. Como tornar um IFRAME editável, permitindo a criação de texto formatado em HTML.

02. Como captar corretamente o texto desse IFRAME de maneira cross-browser, coisa que infelizmente alguns sites como a Ubbi ainda não implementaram e, por isso, o envio de e-mails só fica possível para o Internet Explorer.

Sou usuário e divulgador do Browser Firefox, da Mozilla Foundation, tenho um site que foi criado devido o meu engajamento com a divulgação desse browser.

Um belo dia, entrei em um dos sites provedores de e-mail que eu uso (Ubbi) e constatei que a página de composição de e-mail deles não funcionava no Firefox, somente no IE.

A questão é que a forma como as propriedades do IFRAME são capturadas ou modificadas, varia entre os navegadores. Faltou a esse site ter utilizado um script cross browser para que o mesmo funcionasse em ambos os browsers.

Aqui vai a solução: (a partir da linha abaixo, considere como javascript, e deve estar entre as tags <script> e </script>)

/*

1º Passo - Para que um IFRAME fique editável (possamos escrever texto nele), sua propriedade designMode deve estar em "on" ( "On" para o IE).

Para criarmos uma página cross-browser, precisamos fornecer o tratamento adequado para pelo menos duas famílias de browsers: Internet Explorer e Mozilla Foundation, que engloba o Firefox, Netscape, Mozilla e todos os browsers que seguem as recomendações da W3C.

Para este exemplo, suponhamos a tag:

<IFRAME id="meu_iframe" width=200 height=150></IFRAME>

*/

var moz = !(document.all); /* os da família Mozilla retornam false para document.all */

function getIframeContent( iframe_id){ /* traduzindo : "Pegar o conteúdo do iframe", que pode ser texto ou HTML! */
  if(moz){
     return document.getElementById(
iframe_id).contentDocument.body.innerHTML;
    }
  else {
    return frames[iframe_id].document.body.innerHTML;
   }
}

if(moz){
  document.getElementById("meu_iframe").contentDocument.designMode = "on";
}

else
{

      frames["meu_iframe"].document.designMode = "On";
}

/*

Desta forma, o nosso IFRAME estará editável para as duas famílias de browsers

2º Passo - A correta captura do texto, via função cross-browser getIframeContent, definida acima:

*/

var texto = getIframeContent( "iframe_id");

/*

Dica: baixe um script RICHTEXT cross-browser em: http://www.kevinroth.com/rte/demo.htm

*/

Um abraço!