Com a diversidade de navegadores que existem hoje, fazer com que uma determinada página apareça e funcione exatamente igual em diferentes browsers pode tornar-se uma tarefa penosa, ainda mais quando se está trabalhando com Javascript e CSS.
Há alguns dias precisei criar um menu que seria atualizado manualmente e que deveria constar em todas as páginas de um site estático, embutido em um iframe. Era desejável que as dimensões deste iframe se ajustassem automaticamente à medida que mais itens fossem adicionadas ao menu.
A solução mais prática seria criar um item de biblioteca do Dreamweaver, mas a idéia era não criar dependência do uso de uma ferramenta.
Para resolver essa parada encontrei ótimas referências em diversos fóruns, blogs e sites da web e até que foi rápido. Testei no IE e ficou beleza. O brabo foi quando testei no Firefox… ele simplesmente não conseguia obter a altura do iframe com o atributo .offsetHeight.
A partir de então comecei uma busca desenfreada por alguma dica que me ajudasse a encontrar algum método equivalente e que funcionasse em ambos. Depois de algum tempo, finalmente fiz funcionar no Firefox. Só que aí no IE não funcionava. PQP!
Infelizmente a solução foi fazer uma rotina que detecte o navegador do visitante e então execute comandos diferentes para obtenção dos mesmos resultados. Posto aqui o código, pra quem está com dificuldades não precisar perder tanto tempo quanto eu perdi para resolver isso.
Na página que abrigrará o iframe, ele é declarado assim:
<div id=”divMenu”>
<iframe src=”menu.html” id=”ifr” scrolling=”no” frameborder=”0″ marginheight=”0″ height=”100%”>
</div>
em seguida, criei um .js para armazenar as duas funções criadas para esta tarefa.
menu.js:
function detectaBrowser() {
if (navigator.appName.toLowerCase().indexOf(’microsoft internet explorer’) > -1)
return(’ie’);
else
if (navigator.appName.toLowerCase().indexOf(’netscape’) > -1)
return(’firefox’);
}
function ajustaIframe() {
browser = detectaBrowser();
if (browser == ‘firefox’) {
var tamanho = parent.document.getElementById(”ifr”).contentDocument.body.scrollHeight;
parent.document.getElementById(”ifr”).style.height = (tamanho+10)+’px’;
parent.document.getElementById(”Div_Menu”).style.height = (tamanho+60)+’px’;
} else {
if (browser == ‘ie’) {
var tamanho = document.getElementById(”container”).offsetHeight;
parent.document.getElementById(”ifr”).style.height = tamanho+30;
parent.document.getElementById(”Div_Menu”).style.height = tamanho+70;
}
}
}
É interessante perceber que para setar as dimensões de uma DIV via javascript diretamente no estilo deve-se concatenar o tamanho com “+ px” para que redimensione corretamente no Firefox.
/* IE: */
document.getElementById(”Div”).style.height = 400;
/* firefox: */
document.getElementById(”Div”).style.height = 400 + ‘px’;
Por fim, temos o arquivo menu.html, que é o próprio iframe:
<html>
<head>
<script language=”javascript” src=”js/menu.js” mce_src=”js/menu.js”></script>
</head>
<body onLoad=”ajustaIframe()”>
<div id=”container”>
<a href=”link1.html” mce_href=”link1.html” target=”_parent”>Link01</a>
<a href=”link2.html” mce_href=”link2.html” target=”_parent”>Link02</a>
<a href=”link3.html” mce_href=”link3.html” target=”_parent”>Link03</a>
<a href=”link4.html” mce_href=”link4.html” target=”_parent”>Link04</a>
<a href=”link5.html” mce_href=”link5.html” target=”_parent”>Link05</a>
<a href=”link6.html” mce_href=”link6.html” target=”_parent”>Link06</a>
</div>
</body>
</html>
Venho aqui fazer meu singelo agradecimento ao Sr. Andrew Stuart Tanenbaum, que redigiu o colossal livro “Redes de Computadores” de trocentas e poucas páginas e que me ajudou em muito na disciplina homônima do meu curso. A felicidade só não é completa pois peguei exame em outra disciplina. Mas vai dar tudo certo e a partir de segunda-feira é férias até março.
Não pude emendar a sexta-feira com o feriado da proclamação da república (quinta), então fiquei em Porto Alegre pra descansar e conhecer um pouco da cidade. Estava por terminar a Exposição “No ar 50 anos de vida” do Grupo RBS e parecia ser uma boa pedida pra passar o dia. Depois do almoço, tomei algumas cervejas e me mandei sozinho, aos trancos e barrancos, pra Usina do Gasômetro.