JavaScript Window — глобальний об'єкт браузера

Window — глобальний об'єкт браузера. Усе, що в скрипті доступне «просто так», насправді лежить у ньому.

правити

Загальний опис

document, location, localStorage, setTimeout, fetch, alert — це все властивості й методи вікна. Просто window. можна не писати: він мається на увазі.

Це означає, що будь-яка глобальна змінна, оголошена через var чи без оголошення взагалі, теж стає властивістю вікна — і саме тому глобальні змінні так легко затирають одна одну.

З вікна беруть розміри області перегляду (innerWidth/innerHeight), позицію прокрутки (scrollY), відкривають нові вкладки (open()), слухають зміну розміру.

Важливо: у Web Worker об'єкта window немає — там глобальний об'єкт зветься self. Тому універсальний код пишуть саме через self або globalThis.

правити

Порада

Розмір вікна для CSS-подібних перевірок бери не з innerWidth, а через window.matchMedia('(min-width: 768px)') — так JavaScript і CSS не розійдуться в оцінці «мобільний чи ні».

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

window.innerWidth;

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0*	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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 на сторінці