Isso seria efetivamente fácil, se todos os browsers seguissem o padrão da ECMA… mas não é assim que funciona, e ontem um dos meninos que trabalha aqui comigo estava tentando implementar um código javascript que utiliza tanto a altura útil da tela, como a altura visível da janela (window) e a posição das scrollbars.
Papo vai, papo vem, procura na API da Prototype aqui, da jQuery ali, abre o Google acolá… e me deparo com uma página muito completa, que lista os browsers (inclusive por sistema operacional) e qual é o objeto e atributo que está disponível nele.
browser | platform | mode | window.innerWidth window.innerHeight window.pageXOffset window.pageYOffset |
document.documentElement.clientWidth document.documentElement.clientHeight document.documentElement.scrollLeft document.documentElement.scrollTop |
document.body.clientWidth document.body.clientHeight document.body.scrollLeft document.body.scrollTop |
---|---|---|---|---|---|
IE | Win32 | w. DTD | undef undef undef undef |
ok ok ok ok |
doc. width doc. height 0 0 |
IE | Win32 | w/o. DTD | undef undef undef undef |
0 0 0 0 |
ok ok ok ok |
IE | Mac | all | undef undef undef undef |
undef undef undef undef |
ok ok ok ok |
Firefox | Win32/Mac | w. DTD | +scroller +scroller ok ok |
ok ok ok ok |
ok doc. height. ok ok |
Firefox | Win32/Mac | w/o. DTD | + scroller +scroller ok ok |
doc.width doc.height 0 0 |
ok ok ok ok |
Netscape | Win32 | w. DTD | + scroller +scroller ok ok |
ok ok ok ok |
ok doc. height. ok ok |
Netscape | Win32 | w/o. DTD | + scroller +scroller ok ok |
0 0 0 0 |
ok ok ok ok |
Opera | Win32/Mac | all | + scroller +scroller ok ok |
ok doc.height ok ok |
ok ok ok ok |
Safari | Mac | all | ok ok ok ok |
ok doc.height 0 0 |
ok doc.height ok ok |
Ou seja, não existe um método que funcione para todos os browser…
Mas, o autor criou uma implementação cross-browser que funciona para calcular todos esses atributos (altura e largura da janela, posição da scrollbar horizontal e vertical). Fica a dica!
function f_clientWidth() { return f_filterResults ( window.innerWidth ? window.innerWidth : 0, document.documentElement ? document.documentElement.clientWidth : 0, document.body ? document.body.clientWidth : 0 ); } function f_clientHeight() { return f_filterResults ( window.innerHeight ? window.innerHeight : 0, document.documentElement ? document.documentElement.clientHeight : 0, document.body ? document.body.clientHeight : 0 ); } function f_scrollLeft() { return f_filterResults ( window.pageXOffset ? window.pageXOffset : 0, document.documentElement ? document.documentElement.scrollLeft : 0, document.body ? document.body.scrollLeft : 0 ); } function f_scrollTop() { return f_filterResults ( window.pageYOffset ? window.pageYOffset : 0, document.documentElement ? document.documentElement.scrollTop : 0, document.body ? document.body.scrollTop : 0 ); } function f_filterResults(n_win, n_docel, n_body) { var n_result = n_win ? n_win : 0; if (n_docel && (!n_result || (n_result > n_docel))) n_result = n_docel; return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result; }
Segue o link da página, para referência: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html