Объектная модель браузера (BOM) позволяет JavaScript взаимодействовать с браузером по вопросам, не связанным с содержимым страницы. В этой статье мы рассмотрим такой глобальный объект, как Window.
Он действительно управляет всем, что находится на странице, так как собственно мы открываем окно (по-английски окно и есть window) браузера, и именно в него загружается уже вся страница со своей DOM-структурой.
Поскольку объект window — это глобальный объект в браузере, представляющий окно браузера, то все переменные и функции, которые ты объявляешь в JavaScript вне каких-то других функций, становятся тоже глобальными и принадлежащимиwindow.
|
1 2 |
var a = 10; console.log(window.a); // 10 |
Кроме того, если в твоей разметке есть какие-то блоки с id, то их также можно использовать, как переменные, принадлежащие объекту window.
|
1 2 3 4 5 6 7 8 |
<div id="text">Some text here</div> <div id="some-div">Some text here</div> <div id="changeText">Change this text!</div> <script> text.textContent = 'I use JavaScript'; window['some-div'].innerText = 'I change inner text'; window.changeText.innerHTML = '<b>New text</b> from <i>JavaScript</i>'; </script> |
Давайте посмотрим, как это работает:
Some text here
Some text here
Change this text!
Думаю, что вы сразу заметили, что исходный текст мы не видим, он заменяется на те измененные строки, что мы указали в JavaScript.
Свойства объекта Window
Помимо переменных, id и функций в виде свойств объекта Window, у него есть еще ряд свойств, связанных с его размерами, прокруткой или другими объектами BOM, которые нужны в различных ситуациях работы с html-страницей из JavaScript.
Размер окна
Чтобы определить размер окна браузера, можно использовать два свойства.
window.innerHeight– внутренняя высота окна браузера (в пикселях) без панели инструментовwindow.innerWidth– внутренняя ширина окна браузера (в пикселях) без полосы прокрутки
Оба свойства возвращают размер в пикселях. Показывают высоту и ширину области просмотра (viewport), без полос прокрутки и панели инструментов.
window.outerHeightвозвращает высоту в пикселях, включая элементы интерфейса, такие как панели инструментов и полосы прокрутки.window.outerWidthвозвращает ширину внешней части окна браузера, включая полосы прокрутки и боковые панели типа Инструментов разработчика
Посмотрите на значения данных свойств для вашего экрана:
Прокрутка документа
window.scrollY и window.scrollX - показывают, насколько прокручен документ по вертикали и горизонтали соответственно.
|
1 |
console.log(window.scrollY); // Например, 300 (пользователь проскроллил вниз на 300px) |
Раньше для этого использовали document.documentElement.scrollTop, но scrollY проще и понятнее.
window.pageYOffset и pageXOffset - Полные аналоги scrollY и scrollX. Можно использовать как замену:
|
1 |
console.log(window.pageYOffset === window.scrollY); // true |
Различие между scrollTop и scrollY
-
scrollTop— это свойство конкретного DOM-элемента (например,.scrollable-div), которое показывает, насколько он прокручен. -
window.scrollY— это глобальная прокрутка всего окна.
|
1 2 3 4 |
const box = document.querySelector('.scrollable'); console.log(box.scrollTop); // сколько пикселей прокручено внутри элемента console.log(window.scrollY); // сколько прокручено окно |
Пример: Проверка, достиг ли пользователь конца страницы
|
1 2 3 4 5 6 7 8 |
window.addEventListener('scroll', () => { const scrollBottom = window.innerHeight + window.scrollY; const pageHeight = document.body.offsetHeight; if (scrollBottom >= pageHeight) { console.log('Вы достигли конца страницы!'); } }); |
В примере ниже вы можете увидеть значения некоторые из свойств объекта Window при прокрутке документа (обработка события scroll), а также отображение прогресса чтения документа вверху в виде зеленой полосы.
See the Pen BOM Window properties by HTML-plus (@ambassador) on CodePen.
Свойства объекта window, управляющие браузером
window.history- позволяет управлять историей посещений.window.location- объект, содержащий информацию о текущем URL.window.navigator- данные о браузере: user-agent, язык, платформа, и др.
Методы объекта Window
| Метод | Описание метода |
alert() |
Диалоговое окно для вывода строковых сообщении/переменных. В окне отображается только кнопка «ОК» |
confirm() |
Сообщение диалогового окна подтверждения отображается в методе Windows с кнопками «ОК» и «Отмена». |
prompt() |
диалоговое окно для ввода текста пользователем, дизайн которого зависит от браузера |
| print() | Открывает диалог печати. |
open(url, name, windowFeatures) |
Открывает новое окно. |
close() |
Закрывает текущее окно |
focus() |
Переносит фокус на окно. |
scroll() и scrollTo() |
Прокручивают страницу программно. |
scrollBy() |
Прокручивает документ в окне на указанную величину. |
resizeTo(width, height) |
Масштабирует новое окно до определенных размеров |
moveTo(), moveBy() |
Передвигает текущее окно. Используются крайне редко. |
requestAnimationFrame() |
Для плавной анимации покадрово. |
setTimeout() |
По истечении определенного времени метод вызывает функцию с вычисление выражений, отображением данных и т.п. |
setInterval() |
Он многократно вызывает функцию обратного вызова с фиксированной задержкой между каждым вызовом. |
Давайте разберемся в теории и на практических примерах использование методов объекта Window.
Метод scroll() и scrollTo() и scrollBy()
Метод scroll() прокручивает окно до определенного места в документе. Метод scrollTo() прокручивает окно до определенного набора координат в документе. Метод scrollBy()прокручивает документ в окне на указанную величину.
Синтаксис:
|
1 2 3 4 5 6 7 8 |
scroll(xCoord, yCoord) scroll(options) //scroll(top, left, behavior) scrollTo(xCoord, yCoord) scrollTo(options) //scrollTo(top, left, behavior) scrollBy(xCoord, yCoord) scrollBy(options) //scrollBy(top, left, behavior) |
Параметры методов:
- xCoord, left, yCoord, top - координаты по оси X и оси Y, до которых нужно прокрутить окно.
- behavior - параметр, который определяет, будет ли прокрутка мгновенной или плавно анимированной. Эта опция представляет собой строку, которая должна принимать одно из следующих значений:
smooth: прокрутка должна быть плавнойinstant: прокрутка должна происходить мгновенно, одним прыжкомauto: поведение прокрутки определяется вычисленным значениемscroll-behavior
В приведенном примере вы найдете вариант плавной прокрутки страницы до определенного раздела при клике на ссылку в содержании. Другие варианты плавной прокрутки страницы можно найти в отдельной статье.
See the Pen window.scrollTo() by HTML-plus (@ambassador) on CodePen.
Еще один пример прокрутки контента к нужному блоку с помощью метода window.scrollTo():
See the Pen Premium Responsive Navbar by themrsami (@themrsami) on CodePen.
При всей похожести методов scroll(), scrollTo() и scrollBy(), нужно отметить, что scroll() и scrollTo() можно заменять, а вот scrollBy() будет прокручивать контент только на указанную величину, но делать это многократно от текущей позиции прокрутки.
Метод window.scrollBy() можно использовать для прокрутки страницы в самый низ или снизу на самый верх или на указанное количество пикселей вниз и вправо, например:
|
1 2 3 4 5 6 7 8 9 |
window.scrollBy(0, window.innerHeight); //вниз window.scrollBy(0, -window.innerHeight); //вверх //на 100px вниз и вправо window.scrollBy({ top: 100, left: 100, behavior: "smooth", }); |
Использование методов window.open() и window.close()
Такие методы, как close() или open(), работают только если взаимодействие было вызвано пользователем (например, по клику). Ранее они использовались для создания popup-окон с рекламой. Это очень не нравилось пользователям, поэтому сначала браузеры начали блокировать всплывающие окна, а потом dj всех браузерах появились вкладки, и смысл в открытии нового окна в качестве именно нового окна перестало быть очень востребованным. Кроме того, на данный момент всплывающие/модальные окна можно создать не только с помощью JavaScript, но и с помощью HTML и CSS.
Метод window.open() загружает указанный ресурс в новый или существующий контекст просмотра (то есть вкладку, окно или iframe ) под указанным именем. Параметры, указанные в методе, являются необязательными.
|
1 2 3 4 |
window.open() window.open(url) window.open(url, target) window.open(url, target, windowFeatures) |
Параметры:
url- строка, указывающая URL или путь ресурса для загрузки. Если указана пустая строка ("") или этот параметр пропущен, в целевом контексте просмотра открывается пустая страница.target- строка без пробелов, указывающая имя контекста просмотра, в который загружается ресурс. Если имя не идентифицирует существующий контекст, создается новый контекст с указанным именем. Также могут использоваться специальные ключевые слова, которые характерны для атрибута ссылкиtarget:_self,_blank(по умолчанию),_parent,_top( относится только к фреймам, доступным в HTML 4, например).windowFeatures- строка, содержащая разделенный запятыми список функций окна в форме name=value. Например, это popup=true (всплывающее окно),location, toolbar, menubar, resizable, scrollbars, status.
В windowFeatures возможна следующая информация:
widthилиinnerWidth: Ширина нового окна в пикселях, например,width=200.heightилиinnerHeight: Высота нового окна в пикселях, например,height=200.leftилиscreenX: Горизонтальное значение верхнего левого угла нового окна в пикселях, например,left=100.topилиscreenY: Вертикальное значение верхнего левого угла нового окна в пикселях, например,top=100.location: (yes/no) Если да (yes), окно будет иметь собственную адресную строку. Если нет (no), адресная строка не будет получена. Значение по умолчанию —no, но в Internet Explorer оно действует только в том случае, если строка параметров содержит хотя бы один параметр.menubar: Если да (yes), окно получает собственную строку меню с командами браузера. Если нет (no), то строка меню не будет. Значение по умолчанию —no, но в Internet Explorer оно действует только в том случае, если строка параметров содержит хотя бы один параметр. Обратите внимание: в Safari строка меню не является частью окна, как это обычно бывает на Macintosh, и поэтому ее нельзя скрыть.scrollbars: Если да (yes), в окне будут полосы прокрутки. Если нет (no), пользователь не может прокручивать окно. Значение по умолчанию —no, но в Internet Explorer оно действует только в том случае, если строка параметров содержит хотя бы один параметр.toolbar: Если да (yes), окно получает собственную панель инструментов. Если нет (no), то панель инструментов не будет. Значение по умолчанию —no, но в Internet Explorer оно действует только в том случае, если строка параметров содержит хотя бы один параметр.resizable:yes/noЕсли да (yes), пользователь может изменить размер окна. Если нет (no), он не может изменить размер окна. Значение по умолчанию —no, но в Internet Explorer оно действует только в том случае, если строка параметров содержит хотя бы один параметр.status: (yes/no) Отображает строку состояния.
Сейчас многие из этих параметров потеряли свою актуальность, особенно, если вы открываете новое окно с другим сайтом. Но для временных окон с текущего сайта все это еще можно использовать.
Метод window.close()закрывает текущее окно или окно, в котором он был вызван.
Этот метод можно вызывать только в окнах, которые были открыты скриптом с использованием метода window.open(), или в окнах верхнего уровня, которые имеют одну запись истории. Если окно не соответствует этим требованиям, в консоли появляется ошибка, похожая на эту: Scripts may not close windows that were not opened by script.
Кроме того, объект Window позволяет осуществлять связь между окнами с помощью:
- свойства
window.opener- ссылка на окно, открывшее текущее. - метода
window.postMessage()- безопасная передача данных между окнами (или фреймами).
Давайте посмотрим на рабочий пример. Здесь вы можете указать большую часть настроек для открываемого окна и передать сообщение для главного окна из пользовательского, а также закрыть его .
See the Pen window.open() for links by HTML-plus (@ambassador) on CodePen.
В том, что касается нового окна для открытия Google - все сложнее. Не работают многие параметры + закрыть его из основного скрипта не удается. Почему? Объяснение из сферы безопасности: браузеры не позволяют закрывать "непорожденные" окна через JavaScript именно по соображениям безопасности.
Ключевая причина
Метод window.close() работает только с окнами, которые были открыты с помощью window.open() из того же скрипта. Но даже в этом случае:
Если открытое окно имеет URL другого домена (например, https://www.google.com), то:
- Вы не сможете управлять содержимым этого окна (например,
popupWindow.document.titleне сработает). - В некоторых браузерах (особенно Chrome) даже
popupWindow.close()может не сработать, если пользователь не инициировал действие явно или если это считается небезопасным.
Подробности:
| Тип окна | Можно закрыть window.close()? |
Причина |
|---|---|---|
window.open() → "" или about:blank или свой HTML |
✅ Да | Это окно создано скриптом, и у него тот же источник (origin) |
window.open() → https://google.com |
❌ Обычно нет | Это другой origin + политика браузера ограничивает управление |
| Вкладка, открытая пользователем вручную | ❌ Нет | Браузер блокирует закрытие окон, которые не были открыты скриптом |
✅ Рекомендации
Если ты хочешь, чтобы окно гарантированно закрывалось через popupWindow.close(), тебе нужно:
- Открывать собственную страницу, либо
about:blank, и писать туда свой HTML. - Избегать открытия сторонних сайтов, таких как Google, если ты потом хочешь управлять этим окном.
А вот теперь посмотрим на что-то более используемое - пример со ставками на футбольный матч.
Пример использования методов window.open() и window.close() со ставками на футбольный матч
В этом есть 3 карточки с краткой информацией по футбольному матчу, каждая из которых позволяет открыть форму с полем в новом окне через window.open() и закрыть его с помощью window.close() кликом по кнопке, подтверждающей вашу ставку. Это демонстрирует практическое использование этих методов в контексте каких-то дополнительных действий. С другой стороны, все то же самое можно сделать в модальном окне, а не во внешнем.
See the Pen Ставки на футбол by HTML-plus (@ambassador) on CodePen.
Обработка событий для объекта Window
Событие scroll/onscroll
Событие onscroll происходит, когда прокручивается полоса прокрутки всего окна или элемента. Попробуйте пример ниже, чтобы увидеть, что происходит:
See the Pen window.onscroll by HTML-plus (@ambassador) on CodePen.
Здесь видно, сколько раз вы прокрутили колесико мыши или передвинули полосу прокрутки.
В следующем примере при прокрутке страницы происходит увеличение размера заголовков от 30 до 120px.
See the Pen onScroll re-sizing Header by HTML-plus (@ambassador) on CodePen.
Как работает:
scrollY / maxScrollдаёт долю прокрутки страницы от 0 до 1.- Размер шрифта изменяется линейно в этом диапазоне: от
30pxдо120px. - Ограничение
Math.min(..., 1)гарантирует, что значение не превысит лимит. - Используем
transitionдля плавности.
Событие onresize
Событие onresize происходит, когда изменяется размер окна браузера. В приведенном ниже примере, когда мы сворачиваем или разворачиваем окно браузера, оно изменяет размер и ширину окна браузера.
|
1 2 3 4 5 6 |
window.onresize = function () { let w = window.outerWidth; let h = window.outerHeight; let txt = "Window size: width=" + w + ", height=" + h; document.getElementById("demo").innerHTML = txt; } |
В приведенном ниже примере используются события load, resize, scroll для отображения и анимации временной шкалы (timeline), которая хорошо смотрится и для исторической информации, и для резюме.
See the Pen Building a Vertical Timeline With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
Событие onload/load
Событие onload или load используют для отслеживания загрузки страницы и всех ее элементов, чтобы добавить настройки плагинов или закончить показывать предзагрузчик. Различные примеры обработки события onload вы найдете в отдельной статье.
See the Pen Window.onload by HTML-plus (@ambassador) on CodePen.
Обработка события orientationchange
В том случае, если вам нужно отслеживать переключение между портретной и альбомной ориентацией, вы можете отслеживать событие orientationchange.
|
1 2 3 4 5 6 7 8 |
<div class="orientation-alert" id="orientationAlert">Ориентация устройства изменена!</div> <script> const alertBox = document.getElementById('orientationAlert'); window.addEventListener('orientationchange', () => { alertBox.style.display = 'block'; setTimeout(() => alertBox.style.display = 'none', 2000); }); </script> |
Посмотреть работу javascript-кода с загрузкой горизонтального или вертикального изображения можно на телефоне по ссылке. В принципе, для этого вполне может хватать медиа-запросов, как в примере с использованием тега <picture>.
Заключение
Объект Window, как глобальный объект в JavaScript дает представление о размерах, прокрутке и ориентации окна браузера и позволяет отслеживать такие действия пользователя, как скроллинг, изменение размеров окна браузера, анимацию в нем, дает создавать или открывать новые окна/ вкладки, а также использовать различные диалоговые окна.
