window / navigator / location

Глобальные браузерные объекты: window — корневой, navigator — про устройство, location — про URL.

Что это

  • window — глобальный scope в браузере. Все глобальные переменные становятся его свойствами. Хранит ссылки на все Web API: indexedDB, crypto, fetch, таймеры, и т.д.
  • navigator — про устройство/браузер: geolocation, clipboard, serviceWorker, mediaDevices, onLine, userAgent, language.
  • location — про текущий URL: парсинг, навигация.

window

window.innerWidth;            // viewport size
window.devicePixelRatio;      // retina или нет
window.scrollY;
window.scrollTo({ top: 0, behavior: 'smooth' });

// Размер экрана (физический)
screen.width;
screen.height;

// Таймеры — на самом деле часть Web API, не JS
setTimeout(fn, 100);
setInterval(fn, 1000);
requestAnimationFrame(fn);

// Алерты — синхронные, блокируют event loop. НЕ использовать в проде
alert('hi');
confirm('sure?');
prompt('name?');

navigator.onLine;                              // boolean (не на 100% надёжен)
navigator.language;                            // 'en-US'
navigator.languages;                           // ['en-US', 'ru']
navigator.userAgent;                           // длинная исторически грязная строка
navigator.userAgentData;                       // современная замена (Chromium)

await navigator.clipboard.writeText('hello');
navigator.geolocation.getCurrentPosition(cb);
navigator.serviceWorker.register('/sw.js');
await navigator.mediaDevices.getUserMedia({ video: true });

navigator.storage.estimate;                  // { quota, usage } в байтах
await navigator.storage.getDirectory;        // OPFS root
navigator.locks.request('sync', cb);           // Web Locks

location

location.href;          // 'https://example.com/path?q=1#a'
location.protocol;      // 'https:'
location.host;          // 'example.com:443'
location.hostname;      // 'example.com'
location.port;          // '443'
location.pathname;      // '/path'
location.search;        // '?q=1'   (см. URLSearchParams)
location.hash;          // '#a'
location.origin;        // 'https://example.com'

// Навигация
location.href = '/new';      // как клик по ссылке
location.assign('/new');     // = location.href = ...
location.replace('/new');    // без записи в history
location.reload;           // F5

// Парсинг произвольного URL
const u = new URL('https://example.com/x?a=1');
u.searchParams.get('a');     // '1'

Слушать online/offline

window.addEventListener('online', () => console.log('back'));
window.addEventListener('offline', () => console.log('lost'));
// navigator.onLine — снапшот, события — переходы

Подводные камни

  • userAgent — исторический мусор, спуфится. Для feature detection не использовать → 'feature' in navigator
  • navigator.onLine лжёт: true если есть соединение с роутером, не с интернетом
  • location.href = url блокирует JS — успей сохранить state перед навигацией
  • В Service Worker нет window, location — но есть self, location (URL самого SW)
  • alert/confirm/prompt синхронны и тормозят setInterval-счётчики

Используется в bootcamp

  • Везде — location.pathname для роутинга, navigator.onLine для offline-индикатора, window.matchMedia для responsive

Ссылки

🎓 Источники

  • 🎓 JavaScript в браузере: Web API (часть 1) · TimurShemsedinov · 2019-10-10
    • location работает как URL-parser: автоматически парсит на protocol/host/search/hash.
    • navigator.onLine — булево, в navigator также geolocation, battery, language.
    • UserAgent — исторический хлам: «mozilla / apple webkit / gecko / chrome / safari» всё в одной строке.
    • alert/confirm/prompt синхронны и блокируют event loop, никогда не использовать кроме отладки.
    • Таймеры (setTimeout/setInterval) — часть Web API, не JS-движка.

См. также