Browser Object Model

Большое значение в JavaScript имеет работа с веб-браузером и теми объектами, которые он предоставляет. Например, использование объектов браузера позволяет манипулировать элементами html, которые имеются на странице, или взаимодействовать с пользователем. Все объекты, через которые JavaScript взаимодействует с браузером, описываются таким понятием как Browser Object Model (Объектная Модель Браузера). Browser Object Model можно представить в виде следующей схемы:

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

Объект window

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

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

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

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

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

var alert = function(message){
document.write("Сообщение: " + message);
};
window.alert("Привет мир!");

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

var message = "hello";
document.write(window.message);

Объект history

Объект history предназначен для хранения истории посещений веб-страниц в браузере, нам этот объект доступен через объект window.

Все сведения о посещении пользователя хранятся в специальном стеке history stack. С помощью свойства length можно узнать, как много веб-станиц хранится в стеке:

document.write("В истории " + history.length + " станиц");

Для перемещения по страницам в истории в объекте history определены методы back() перемещение к прошлой посмотренной странице и forward() перемещение к следующей просмотренной странице:

history.back();  // перемещение назад

history.forward();  // перемещение вперед

В объекте history определен специальный метод go(), который позволяет перемещаться вперед и назад по истории на определенное число страниц.

Переместимся на 2 страницы назад:

history.go(-2);

Переместимся на 3 страницы вперед:

history.go(3);

Объект location

Объект location содержит информацию о расположении текущей веб-страницы: URL, информацию о сервере, номер порта, протокол. С помощью свойств объекта мы можем получить эту информацию:

href полная строка запроса к ресурсу
pathname путь к ресурсу
origin общая схема запроса
protocol протокол
port порт, используемый ресурсом
host хост
hostname название хоста
hash если строка запроса содержит символ решетки #, то данное свойство возвращает ту часть строки, которая идет после этого символа
search если строка запроса содержит знак вопроса ?, например, то данное свойство возвращает ту часть строки, которая идет после знака вопроса

Например, пусть есть следующая веб-страница test.html, которая лежит на локальном веб-сервере:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
document.write("Строка запроса: " + location.href + "<br />");
document.write("Путь к ресурсу: " + location.pathname + "<br />");
document.write("Схема: " + location.origin + "<br />");
document.write("Протокол: " + location.protocol + "<br />");
document.write("Порт: " + location.port + "<br />");
document.write("Хост: " + location.host + "<br />");
document.write("Имя хоста: " + location.hostname + "<br />");
document.write("Хэш: " + location.hash + "<br />");
document.write("Поиск: " + location.search + "<br />");
</script>
</body>
</html>

Также объект location предоставляет ряд методов, которые можно использовать для управления путем запроса:

assign(url) загружает ресурс, который находится по пути url
reload(forcedReload) перезагружает текущую веб-страницу. Параметр forcedReload указывает, надо ли использовать кэш браузера. Если параметр равен true, то кэш не используется
replace(url) заменяет текущую веб-станицу другим ресурсом, который находится по пути url. В отличие от метода assign, который также загружает веб-станицу с другого ресурса, метод replace не сохраняет предыдущую веб-страницу в стеке истории переходов history, поэтому мы не сможем вызвать метод history.back() для перехода к ней

Для перенаправления на другой ресурс мы можем использовать как свойства, так и методы location:

location = "http://google.com";
//  аналогично
//  location.href = "http://google.com";
//  location.assign("http://google.com");

Переход на другой локальный ресурс:

location.replace("index.html");

Объект navigator

Объект navigator содержит информацию о браузере и операционной системе, в которой браузер запущен. Он определяет ряд свойств и методов, основным из которых является свойство userAgent, представляющее браузер пользователя:

document.write(navigator.userAgent);

Данное свойство хранит полную стоку юзер-агента, например: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Чтобы вычленить из этой информации непосредственно браузер, можно попробовать найти в этой информации название браузера:

var browser, uAgent = navigator.userAgent;
if(uAgent.indexOf("Chrome") > -1) {
browser = "Google Chrome";
} else if (uAgent.indexOf("Safari") > -1) {
browser = "Apple Safari";
} else if (uAgent.indexOf("Opera") > -1) {
browser = "Opera";
} else if (uAgent.indexOf("Firefox") > -1) {
browser = "Mozilla Firefox";
} else if (uAgent.indexOf("MSIE") > -1) {
browser = "Microsoft Internet Explorer";
}
document.write(browser);

Свойство geolocation

Объект navigator хранит свойство geolocation, с помощью которого можно получить географическое положение пользователя. Для получения положения используется метод getCurrentPosition(). Этот метод принимает два параметра: функцию, которая срабатывает при удачном запуске, и функцию, которая срабатывает при ошибке запроса геоданных:

function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var altitude = position.coords.altitude;
var speed = position.coords.speed;
document.write("Широта: " + latitude + "
");
document.write("Долгота: " + longitude + "
");
document.write("Высота: " + altitude + "
");
document.write("Скорость перемещения: " + speed + "
");
};
function error(obj) {
document.write("Ошибка при определении положения");
};
navigator.geolocation.getCurrentPosition(success, error);

В функцию, которая выполняется при удачном определении геоданных, передается позиция пользователя в виде параметра position. Передаваемый объект имеет вложенный объект coords, с помощью свойство которого можно получить непосредственные координаты пользователя:

latitude географическая широта
longitude географическая долгота
altitude высота
speed скорость, с которой перемещается пользователь (например, если он идет или перемещается на транспорте)

При этом надо учитывать, что в браузерах действует политика безопасности, которая при обращении к методу geolocation.getCurrentPosition() отображает пользователю сообщение, в котором пользователь может подтвердить отправку географических координат. Если же пользователь откажется, то будет срабатывать функция error().