Каков самый надежный способ получить ширину/высоту окна браузера с помощью JavaScript?

В настоящее время я использую следующие условия, но они не работают в браузерах или вообще:

if (typeof (window.innerHeight) == 'number') {
    //Non-IE:
    //Perform operation using window.innerWidth/Height
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    //Perform operation using document.documentElement.clientWidth/Height
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    //Perform operation using document.body.clientWidth/Height
}

Я полагаю, что упустил одно или два условия - возможно, есть еще одно распространенное выражение, которое я не принял во внимание.

Что мне нужно добавить, чтобы сделать это полным?


javascript browser cross-browser robustness
person Giffyguy    schedule 08.11.2010    source источник
comment
Вы действительно все еще поддерживаете IE4? Доля рынка IE‹6 вместе взятых составляет где-то около 1%, не так ли?   -  person josh.trow    schedule 08.11.2010
comment
@Josh.Trow: Я вытащил это где-то из Интернета - я просто хочу поддерживать как можно больше браузеров. Дополнительное условие для IE4 на самом деле не намного сложнее, а?   -  person Giffyguy    schedule 08.11.2010
comment
IE 4 — это древняя мумия. Это было старо, даже когда я был моложе. Я не могу представить, чтобы кто-то все еще пытался его поддержать. Вам тоже действительно не стоит об этом думать.   -  person Halil Özgür    schedule 08.11.2010
comment
Может быть, нет, но я не вижу смысла в том, чтобы посторонний код плавал вокруг, все, что он делает, это снижает читаемость. Я работаю над проектами с тысячами файлов с тысячами строк кода в каждом, и ясность абсолютно важна, но я полагаю, что это зависит от проекта.   -  person josh.trow    schedule 08.11.2010
comment
Кроме того, этот q является своего рода обманом stackoverflow.com/questions/833708/   -  person josh.trow    schedule 08.11.2010
comment
@Josh.Trow: О, вы правы, этот код выглядит примерно идентично.   -  person Giffyguy    schedule 08.11.2010

Ответы (2)


arrow_upward
0
arrow_downward

Вам лучше обернуть всю логику в функцию, так что вам нужно будет сказать только getWindowHeight()

// cross browser window height
function getWindowHeight() {
  return window.innerHeight || 
         (document.documentElement && document.documentElement.clientHeight) || 
         (document.body && document.body.clientHeight);
}

Протестировано: IE5.5+, FF 2+, Chrome, Opera

Но для еще более надежного подхода посетите соответствующий раздел часто задаваемых вопросов о comp.lang.javascript:
Как найти размер окна?

person gblazex    schedule 08.11.2010

arrow_upward
1
arrow_downward

Включите jQuery на свои страницы и используйте $(window).width() и $(window).height().

person Halil Özgür    schedule 08.11.2010
comment
Хотите сделать это в JavaScript, а не в JQuery. - person Giffyguy; 08.11.2010
comment
JQuery — это Javascript с открытым исходным кодом. Если вам не нужна полная поддержка jQuery, вы можете посмотреть в источнике, как они реализовали эти методы. - person Mark Baijens; 08.11.2010
comment
@Mark: Это отличный момент. Спасибо. Я вполне могу это сделать, так как методы JQuery, вероятно, являются лучшим примером на рынке. - person Giffyguy; 08.11.2010
comment
Я бы сказал, что если кто-то запрашивает javascript, он не ищет решение jquery, даже если jquery работает в javascript и имеет открытый исходный код. Да, они могут посмотреть на источник, но почему бы просто не дать им эту информацию? - person rob; 08.11.2010
comment
@Giffyguy - Не смей в это верить. Всегда. - person gblazex; 08.11.2010
comment
@galambalazs, не могли бы вы пояснить, почему он никогда в это не поверил? - person Halil Özgür; 08.11.2010
comment
То, что многие люди что-то используют, не означает, что это всегда правильно. На самом деле у jQuery было много проблем. Резигу потребовались годы, чтобы удалить сниффинг пользовательского агента из своего кода. Он даже написал книгу, полную заблуждений bit.ly/cV1mVU. Также у него один из худших селекторных движков с принципиально нарушенной абстракцией bit.ly/c0ZliK, bit.ly/c3oiQK, bit.ly/99xQLS. Все, что я хочу сказать, это то, что jQuery не так блестяща, как можно было бы наивно подумать. Это точно нет "the best example on the market". - person gblazex; 08.11.2010
comment
Хорошо, можете ли вы предложить лучшую альтернативу (ы) с функциональностью jQuery? - person Halil Özgür; 09.11.2010