JS "Окно" width-height vs "screen" width-height?

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

// 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();?

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

Чтобы сделать что-то более ясным, если не работает iframes -

  • $(window).height() вернет высоту области просмотра, исключая высоту любой из панелей инструментов, представленных на странице. То же самое можно поэкспериментировать здесь, открыв консоль firebug (если firefox) или консоль Google Chrome, нажав клавишу F12 и включив $(window).height(), который всегда будет меняться, если добавить/удалить любую из панелей инструментов из браузера или просто изменить высоту от firebug или хром-отладчика.

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

  • $(document).height() вернет высоту содержимого вашей страницы, как долго ваша страница.
    Высота панелей инструментов или окна браузера (если размер или размер) не влияет на его значение.
    Прежде чем отправлять мой ответ, он был около 2407 в хроме и 2410 в firefox.

Надеюсь, что это поможет и сделает вещи более ясными.

Ответ 4

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

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 я хотел бы думать, что "Window" - это обозначение для новых версий браузера (IE9, Chrome, Firefox и т.д.), А "document" - для IE 8,7,6,5.

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