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

Опубликовано: 05.09.2018

Объектная модель браузера (анг. Browser Object Model (BOM)) — это часть JavaScript, которая позволяет скрипту взаимодействовать с программой просмотра веб-страниц. BOM представляет объекты, через свойства и методы которых можно управлять внешним видом и поведением обозревателя.

Основы javascript 15 - Объект window и BOM (объектная модель браузера)

Объектная модель браузера в качестве компонента JavaScript появилась в обозревателе Netscape Navigator 2.0 в 1996 году. В том же году Microsoft представила Internet Explorer 3.0 с собственной версией JavaScript — JScript и собственной моделью BOM. Оба браузера поддерживали примерно одинаковый набор объектов, ставших основой DOM 0 (legacy DOM) и последующих спецификаций объектной модели документа. Появивишиеся позже разнообразные браузеры , поддерживающие JavaScript, также представляют более-менее одинаковые объекты BOM, но официальных стандартов этой модели (в отличие от DOM) так и не появилось до настоящего времени.

Место BOM в структуре JavaScript — в условной середине между системным компонентом (core) и моделью документа (рис. 1).

Рис. 1. Объектная модель браузера в структуре JavaScript

Основные объекты BOM и связи между ними приведены на рис. 2. Следует отметить, что объект document, с которого начинается иерархия DOM, сам является частью модели браузера.

Рис. 2. Объекты браузера

Объекты BOM: особенности реализации

Рассмотрим особенности реализации некоторых объектов BOM в разных браузерах (актуальных на момент написания статьи) на нескольких примерах. Сразу отметим, что основные отличия проявляются в свойствах и методах объектов. Итак:

window — объект, который поддерживается всеми программами просмотра, представляет окно браузера. Корень иерархии BOM, через который осуществляется доступ ко всем прочим объектам JavaScript. Пример:

// window.open(URL, name[, args]) — открывает новое окно. // Поведение открываемого окна зависит от браузера и списка параметров (args). // Читать исследование . var newwindow = window.open("example.com", "sample");

window.document — представляет доступ ко всем элементам HTML гипертекстового документа, загруженного в заданное окно. Поддерживается всеми браузерами. Примеры:

document.getElementById("outbox").innerHTML = "<h2>Hello!</h2>"; var x = document.getElementsByTagName("p"); var y = x.getElementsByClass("asH2");

Проверить отлтичия в реализации объекта document в разных браузерах можете самостоятельно, с помощью этого простого скрипта:

window.history — управляет историей просмотра веб-страниц. Для перемещения по журналу просмотра используются методы back, forward, go:

// вернет на предыдущую просмотренную страницу // работает во всех обозревателях window.history.back(); // или var n = -1; window.history.go(n); // но! var URL = "example.com"; window.history.go(URL); // работает только в Internet Explorer

Подробное описание объектных моделей конкретных браузеров можно найти на страницах разработчиков (см. например Mozilla , Internet Explorer )

BOM: кроссбраузерность

Приведенных выше примеров достаточно, чтобы убедиться, что полной совместимости между браузерами нет как не было, да и вряд ли она когда-нибудь будет достигнута. Этот отголосок браузерных войн все также требует от разработчиков написания скриптов с учетом особенностей популярных браузеров, особенно когда возникает необходимость изменить поведение не документа, а самой программы-обозревателя.

Несколько облегчить задачу разработки клиентстких веб-приложений с учетом специфики различных браузеров позволяет использование кроссбраузерных библиотек на JavaScript. Один из примеров — скрипт $B, разработанный С.Чапменом (Stephen Chapman) и позволяющий управлять позиционированием и размерами окна браузера. Еще пример библиотеки того же автора — скрипт $E для управления событиями (events). Найти эти скрипты можно по запросу « modular script library ».

Еще примеры кроссбраузерных решений — это библиотеки jQuery и Bootstrap. И хотя они ориентированы в первую очередь на работу с объектами документа, обращения к объектам браузера там широко используются.

Постоянный адрес этой страницы: