Работа с браузером и BOM

Browser Object Model и объект window

Большое значение в JavaScript имеет работа с веб-браузером и теми объектами, которые он предоставляет. Например, использование объектов браузера позволяет манипулировать элементами html, которые имеются на странице, или взаимодействовать с пользователем.

Все объекты, через которые JavaScript взаимодействует с браузером, описываются таким понятием как Browser Object Model (Объектная Модель Браузера).

Browser Object Model можно представить в виде следующей схемы:

В вершине находится главный объект - объект window, который представляет глобальный объект (фактически представляет собой браузер). Этот объект в свою очередь включает ряд других объектов, в частности, объект document, который представляет отдельную веб-страницу, отображаемую в браузере.

Объект window

Объект window представляет собой окно веб-браузера, в котором размещаются веб-страницы. window является глобальным объектом, поэтому при доступе к его свойствам и методам необязательно использовать его имя. Например, объект window имеет метод alert(), который отображает окно сообщения. Но нам необязательно писать:

window.alert("Привет мир!");

window можно не использовать:

alert("Привет мир!");

Но так как данный объект глобальный, то это накладывает некоторые ограничения. Например:

var alert = function(message){

	console.log("Сообщение: ", message);
};
window.alert("Привет мир!");

С помощью var здесь определяется глобальная переменная alert. Все объявляемые в программе глобальные переменные или функции автоматически добавляются к объекту window. И поскольку название новой функции будет совпадать с названием метода alert(), то произойдет переопределение этого метода в объекте window новой функцией.

И если мы объявим в программе какую-нибудь глобальную переменную, то она нам доступна как свойство в объекте window:

var message = "hello";
console.log(window.message);

Свойства window

С помощью свойств объекта window можно получить различную информацию об окне браузера. В частности, для определения положения окна применяются следующие свойства:

• innerHeight: содержит высоту окна, в том числе горизонтальные полосы прокрутки

• innerWidth: содержит ширину окна, в том числе вертикальные полосы прокрутки

• outerHeight: содержит высоту окна браузера, в том числе все полосы прокрутки браузера

• outerWidth: содержит ширину окна браузера, в том числе все полосы прокрутки браузера

• pageXOffset: псевдоним для window.scrollX

• pageYOffset: псевдоним для window.scrollY

• screenX: содержит позицию окна браузера по оси X, то есть расстояние от окна браузера до левого края экрана

• screenY: содержит позицию окна браузера по оси X, то есть расстояние от окна браузера до верхнего края экрана

• scrollX: содержит количество пикселей веб-страницы, прокрученных по горизонтали

• scrollY: содержит количество пикселей веб-страницы, прокрученных по вертикали

Например, получим положение окна:

console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(window.screenX);
console.log(window.screenY);    

Компоненты браузера

Окно браузера обычно состоит из различных компонентов. В зависимости от конкретного браузера и персональных настроек набор конкретных компонентов может отличаться. Но в общем случае типовое окно браузера выглядит следующим образом:

Помимо собственно области содержимого, в которой отображается веб-страница, веб-браузер имеет имеет еще ряд компонентов:

• адресная строка для ввода URL-адреса или поискового запроса (Address Bar)

• строка состояния (Status Bar), которая указывает, загружена ли веб-страница или находится в процессе загрузки

• строка меню (Menu Bar)

• панель инструментов (ToolBar)

• некоторая "личная" / "персональная" панель, которая, например, содержит закладк (Personal Bar)

• полосы прокрутки, которые отображают горизонтальное и вертикальное положение (Horizontal/Vertical ScrollBar)

Объект window имеет ограниченные возможности для взаимодействия с этими компонентами, в частности, для проверки наличия этих компонентов объект window имеет ряд свойств:

• locationbar: содержит объект, который указывает, отображается адресная строка или нет

• menubar: указывает, отображается ли панель меню или нет

• personalbar: указывает, отображается ли персональная панель (например, панель закладок) или нет

• scrollbars: указывает, отображаются ли полосы прокрутки или нет

• statusbar: указывает, отображается строка состояния или нет

• toolbar: указывает, отображается ли панель инструментов или нет

Например, узнаем отображается ли персональная панель:

console.log(window.personalbar); // BarProp {visible: true} или BarProp {visible: false}

Свойство возвратит объект BarProp, в котором свойство visible собственно и указывает, отображается панель или нет.

Свойство screen

Для получения информации об экране также применяется свойство screen объекта window. Это свойство представляет объект типа Screen

• availTop: указывает на высоту фиксированных компонентов, которые примыкают к верхней стороне браузера, например, различных верхних панелей

• availLeft: указывает на ширину фиксированных компонентов, которые примыкают к левой стороне браузера,, например, различных левых панелей

• availHeight: содержит максимально доступную высоту в пикселях минус высоту верхних и нижних панелей

• availWidth: содержит максимально доступную ширину в пикселях минус ширину левых и правых панелей

• colorDepth: содержит глубину цвета экрана

• height: содержит высоту экрана в пикселях

• orientation: содержит объект типа ScreenOrientation, который предоставляет информацию об ориентации устройства

• pixelDepth: содержит глубину пикселя экрана

• width: содержит ширину экрана в пикселях

Пример использования

console.log(screen.availTop);       // 25
console.log(screen.availLeft);      // 0
console.log(screen.availHeight);    // 695
console.log(screen.availWidth);     // 1280
console.log(screen.width);          // 1280
console.log(screen.height);         // 800
console.log(screen.pixelDepth);     // 24
console.log(screen.colorDepth);     // 24