O Básico da web

Hoje à tarde meu amigo Jânio me apareceu no MSN com um problema interessante: ele estava fazendo um JavaScript que deveria abrir uma nova janela, com uma determinada largura e uma determinada altura. Nada mais simples, você pode pensar. Eu também pensei e ele também.

Acontece que no firefox a janela abria com uma largura mais ou menos igual à metade do valor que ele tinha colocado no parâmetro width do método window.open(). Estranho, não?

Pra quem não conhece, window.open() é um método que simplesmente serve para abrir uma nova janela. O uso é assim:

//window.open(URL, nome_da_janela, parâmetros);
//ex:
window.open('teste.html', 'janela1', 'width=500,height=400');

Tem mais parâmetros, mas isso não vem ao caso agora. O fato é que eu fiz diversos testes e realmente a janela nunca abria com a largura certa no Firefox.

Então, procura daqui, procura dali, dando uma olhada na referência de DOM do Mozilla Developer Center, mais precisamente nos métodos do objeto window, achei a solução.

Há três parâmetros referentes à largura da janela:

outerWidth

Define a largura da janela inteira do browser, incluindo barras de rolagem, etc e tal. só é suportada por browsers gecko (família Mozilla e Netscape)

width

Define a largura do viewport, ou seja, da área útil do browser, a área onde é exibido o conteúdo da página.

innerWidth

A mesma coisa que width, mas só é suportada por browsers gecko.

Esses parâmetros são aplicados na ordem de precedência acima. O outerWidth é o mais “forte”, ou seja, seu valor “ganha” dos outros dois. width vem logo depois, seguido de innerWidth.

A solução para o problema em questão era usar o outerWidth que, por algum motivo que eu não sei exatamente explicar, funciona direitinho, ao contrário do width. Porém, como outerWidth só funciona nos browsers gecko, temos que usar width também, para agradar ao IE, opera e, creio eu, safari. Nosso código ficou assim:

window.open('teste.html', 'janela1', 'width=500,outerWidth=500,height=400');

Note que, caso a janela a abrir tenha barra de rolagem vertical, vai ser necessário setar outerWidth para um valor ligeiramente maior que width, para obter o mesmo resultado em todos os browsers. Mas, em geral, 10 pixels mais ou menos, não matam ninguém.

Fica a dica, caso algum de vocês venha a ter o mesmo problema.

Leia também:

• Menu com imagens e rollover - Exemplo de HTML e CSS
• Tudo sobre Image Replacement
• HTML - Esqueleto de um documento HTML - Parte 3: Outros elementos do HEAD
• Padrões web: Desenvolvimento em camadas
• Hospedagem de sites Dreamhost: 50% de desconto
• Hospedagem de sites Dreamhost: 50% de desconto