JS "Окно" ширина-высота против "экрана" ширина-высота? - PullRequest
Новая
       40

JS "Окно" ширина-высота против "экрана" ширина-высота?

6 голосов
/ 06 июня 2011

Мне немного интересно, когда я смотрю на этот код: 

// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

...

// Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

В чем разница между $(document).height(); и $(window).height();?

Ответы [ 4 ]

11 голосов
/ 06 июня 2011

Окно является клиентским объектом верхнего уровня, который содержит документ. Этот jsFiddle показывает, что и $(window).height(), и $(document).height() возвращают одно и то же значение: http://jsfiddle.net/jackrugile/5xSuv/

Окно имеет размер окна просмотра и не включает в себя хром или интерфейс браузера, если я не ошибаюсь. Я считаю, что значения обоих всегда будут одинаковыми, если только вы не ссылаетесь на что-то вроде iframe в окне.

4 голосов
/ 06 июня 2011

$(document).height - это внутренняя область области просмотра, в основном от нижней части панели инструментов / панели URL-адресов до строки состояния / нижней полосы прокрутки / нижней части окна. $(window).height получает всю высоту окна, включая такие элементы, как адресная строка и полосы прокрутки.

3 голосов
/ 11 июня 2012

Код jsfiddle от @jackrugile возвращает одинаковые значения для документа и окна, потому что код jsfiddle выполняется внутри iframe.

Чтобы сделать вещи более понятными, если не работает Iframes -

  • $ (window) .height () вернет высоту области просмотра, исключая высоту любой из панелей инструментов, представленных на странице.То же самое можно испытать здесь, открыв консоль Firebug (если Firefox) или консоль Google Chrome, нажав клавишу F12 и запустив $ (window) .height (), которая всегда будет меняться, если добавить / удалить любую из панелей инструментов из браузера или просто изменитьвысота firebug или хромового отладчика.Он всегда будет возвращать высоту окна вашего браузера, вычитая высоту всех панелей инструментов.
  • $ (document) .height () вернет высоту содержимого вашей страницы, какова длина вашей страницы.Высота панелей инструментов или окна браузера (если изменить размер или нет) не влияет на его значение.До публикации моего ответа он был около 2407 в Chrome и 2410 в Firefox.

Надеюсь, это поможет и прояснит ситуацию.

1 голос
/ 20 августа 2013

Экран - Ваш экран: значение размера изменяется в зависимости от размера вашего монитора. 

screen.availWidth  //There is no screen.height

Окно или документ - Окно браузера (окно просмотра браузера, НЕ включая панели инструментов и полосы прокрутки). Игнорирует невидимую прокручиваемую часть, если страница прокручиваема. Используйте «окно» для IE9 и выше, это просто. 

window.innerHeight    //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight    //IE 8,7,6,5

Примечание : окно и документ не совпадают. Объект документа (из DOM) является свойством объекта Window (из спецификации). Но выдают одинаковый размер. От W3Schools я хотел бы думать, что «Окно» - это обозначение для новых версий браузера (IE9, Chrome, Firefox и т. Д.), А «документ» - для IE 8,7,6,5.

http://www.w3schools.com/js/js_window.asp,, а также протестировал вышеприведенное на простой странице aspx на мониторах разных размеров.

...