JavaScript Window — глобальний об'єкт браузера
Window — глобальний об'єкт браузера. Усе, що в скрипті доступне «просто так», насправді лежить у ньому.
Загальний опис
document, location, localStorage, setTimeout, fetch, alert — це все властивості й методи вікна. Просто window. можна не писати: він мається на увазі.
Це означає, що будь-яка глобальна змінна, оголошена через var чи без оголошення взагалі, теж стає властивістю вікна — і саме тому глобальні змінні так легко затирають одна одну.
З вікна беруть розміри області перегляду (innerWidth/innerHeight), позицію прокрутки (scrollY), відкривають нові вкладки (open()), слухають зміну розміру.
Важливо: у Web Worker об'єкта window немає — там глобальний об'єкт зветься self. Тому універсальний код пишуть саме через self або globalThis.
- Порада
-
Розмір вікна для CSS-подібних перевірок бери не з
автор: NagarDinnerWidth, а черезwindow.matchMedia('(min-width: 768px)')— так JavaScript і CSS не розійдуться в оцінці «мобільний чи ні».
Синтаксис
window.innerWidth;методи
| Метод | Опис |
|---|---|
| open | Відкриває нове вікно чи вкладку. |
| setTimeout | Виконує функцію один раз після затримки. |
| setInterval | Виконує функцію періодично. |
| clearTimeout | Скасовує setTimeout. |
| clearInterval | Скасовує setInterval. |
| requestAnimationFrame | Виконує функцію перед наступним перемалюванням. |
| matchMedia | Перевіряє медіа-запит із JavaScript. |
| getComputedStyle | Обчислені CSS-стилі елемента. |
| scrollTo | Прокручує документ до заданих координат. |
| alert | Модальне вікно з повідомленням. |
| confirm | Модальне вікно з питанням; повертає true/false. |
| prompt | Модальне вікно з полем введення. |
| postMessage | Безпечно передає повідомлення між вікнами. |
властивості
| Властивість | Опис |
|---|---|
| location | Адреса поточної сторінки (об'єкт Location). |
| localStorage | Постійне сховище ключ–значення цього походження. |
| sessionStorage | Сховище на час сесії вкладки. |
| history | Історія сесії (об'єкт History). |
| navigator | Інформація про браузер (об'єкт Navigator). |
| innerWidth | Ширина області перегляду разом зі смугою прокрутки. |
| innerHeight | Висота області перегляду. |
| scrollY | Вертикальна прокрутка документа в пікселях. |
| scrollX | Горизонтальна прокрутка документа в пікселях. |
| devicePixelRatio | Співвідношення фізичних пікселів до CSS-пікселів. |
| parent | Батьківське вікно для фрейма. |
| opener | Вікно, що відкрило поточне. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| Window | 1+ | 1+ | 1+ | 3+ | 12+ | 4+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| Window | yes | yes | yes | yes |
Приклади
+ запропонувати свій приклад у пісочниці
Розміри, прокрутка й перевірка медіазапиту з JavaScript.
console.log(window.innerWidth, window.innerHeight); // область перегляду
console.log(window.scrollY); // прокрутка згори
// це все — теж window
window.setTimeout(() => console.log('через секунду'), 1000);
console.log(window.location.pathname);
// узгоджено з CSS, на відміну від порівняння innerWidth
const isDesktop = window.matchMedia('(min-width: 768px)');
console.log(isDesktop.matches);
isDesktop.addEventListener('change', event => {
console.log(event.matches ? 'десктоп' : 'мобільний');
});
// у Worker window немає — там self
console.log(globalThis === window); // true на сторінціКоментарі
Коментарів ще немає — будьте першим!