Browser Object Model

BOM - Объектная модель браузера

• Глобальные переменные являются свойствами объекта window.
• Глобальные функции являются методами объекта window.

Объект window

Размер окна

Чтобы определить размер окна браузера, можно использовать два свойства.

Оба свойства возвращают размер в пикселях:

• window.innerHeight – внутренняя высота окна браузера (в пикселях)
• window.innerWidth – внутренняя ширина окна браузера (в пикселях)

Другие методы объекта window:

• window.open() - открывает новое окно
• window.close() - закрывает текущее окно
• window.moveTo() - передвигает текущее окно
• window.resizeTo() - изменяет размер текущего окна

Объект Screen

Объект window.screen содержит информацию об экране пользователя.

Объект window.screen можно использовать без префикса window.

Свойства:

• screen.width - возвращает ширину экрана пользователя в пикселях
• screen.height - возвращает высоту экрана пользователя в пикселях
• screen.availWidth - возвращает ширину экрана пользователя в пикселях минус интерфейс вроде таскбара Windows
• screen.availHeight - возвращает высоту экрана пользователя в пикселях минус интерфейс вроде таскбара Windows.
• screen.colorDepth - возвращает число бит, используемых для отображения цвета
• screen.pixelDepth - возвращает глубину пикселя экрана в битах

Объект Location

Объект window.location может использоваться для получения адреса (URL) текущей страницы и перенаправления браузера на новую страницу.

Объект window.location может записываться без префикса window.

Некоторые примеры:

• window.location.href - возвращает ссылку (URL) текущей страницы
• window.location.hostname - возвращает доменное имя веб-хоста
• window.location.pathname - возвращает путь и имя файла текущей страницы
• window.location.protocol - возвращает использованный веб-протокол (http: или https:)
• window.location.assign - загружает новый документ

Переход на новый адрес

1<script>
2function goToNewPage(url) {
3   window.location.assign(url)
4}
5</script>
6<button  onclick="newDoc(https://ru.wikipedia.org/)">
7Go to new page
8</button>

Объект History

Объект window.history содержит историю посещенных браузером страниц.

Объект window.history может записываться без префикса window.

Чтобы обеспечить приватность пользователей, есть некоторые ограничения того, как JavaScript может получить доступ к этому объекту.

Некоторые методы:

• history.back() - то же самое, что нажатие на кнопку браузера "Назад"
• history.forward() - то же самое, что нажатие на кнопку браузера "Вперед"

Возврат назад

Метод history.back() загружает предыдущий URL в списке посещенных страниц.

Этот метод действует так же, как кнопка браузера "Назад".

Пример:

1<script>
2function goBack() {
3    window.history.back()
4 }
5</script>
6<button onclick="goBack()">
7Go back
8</button>

Переход вперед

Метод history.forward() загружает следующий URL в списке посещенных страниц. Этот метод действует так же, как кнопка браузера "Вперед".

Пример:

1<script>
2function goForward() {
3    window.history.forward()
4 }
5</script>
6
7<button onclick="goForward()">
8Go forward
9</button>

Объект Navigator

Объект window.navigator содержит информацию о браузере посетителя страницы.

Объект window.navigator может записываться без префикса window.

• navigator.appName - возвращает имя браузера.

• navigator.appCodeName - возвращает кодовое имя браузера.

• navigator.platform - возвращает платформу браузера
• navigator.cookieEnabled - возвращает значение true, если "куки" (специальные файлы-метки) разрешены, в обратном случае возвращается значение false
• navigator.product - product возвращает имя движка браузера
• navigator.appVersion - возвращает информацию о версии браузера
• navigator.userAgent - возвращает заголовок пользовательского агента, посланного браузером серверу
• navigator.language - возвращает язык браузера
• navigator.onLine - возвращает true, если браузер подключен к сети Интернет.