Объект window
представляет окно, содержащее документ DOM. Этот объект может быть главным окном, набором фреймов или отдельным фреймом, или даже новым окном, созданным с помощью JavaScript.
Как вы помните из предыдущих глав руководства, мы использовали метод alert()
в наших скриптах для отображения всплывающих сообщений. Это метод объекта window
.
В следующих нескольких главах мы увидим ряд новых методов и свойств объекта window
, которые позволяют нам делать такие вещи, как запрос информации, подтверждение действий пользователя, открытие новых окон и т. д. Это позволяет добавить больше интерактивности к вашим веб-страницам.
Расчет ширины и высоты окна
Для определения ширины и высоты области просмотра окна браузера (в пикселях), включая горизонтальную и вертикальную полосу прокрутки есть свойства innerWidth
и innerHeight
. Вот пример, который отображает текущий размер окна при нажатии кнопки:
<script>
function windowSize(){
var w = window.innerWidth;
var h = window.innerHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Получить размер окна</button>
Однако, если вы хотите узнать ширину и высоту окна, исключая полосы прокрутки, вы можете использовать свойства clientWidth
и clientHeight
любого элемента DOM (например, div
), как показано ниже:
<script>
function windowSize(){
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Получить размер окна</button>