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

Рис. 4.2.

Свойство location объекта window само является объектом класса Location . Класс Location , в свою очередь, является подклассом класса URL , к которому относятся также объекты классов Area и Link . Объекты Location наследуют все свойства объектов URL , что позволяет получить доступ к любой части схемы URL . Подробнее о классе объектов URL мы расскажем в "Программируем гипертекстовые переходы" .

В целях совместимости с прежними версиями JavaScript, в языке поддерживается также свойство window.document. location , которое в настоящее время полностью дублирует свойство window. location со всеми его свойствами и методами. Рассмотрим теперь свойства и методы объекта window. location (событий, связанных с этим объектом, нет).

Свойства объекта location

Их проще продемонстрировать на примере. Предположим, что браузер отображает страницу, расположенную по адресу:

Тогда свойства объекта location примут следующие значения:

window.location.href = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark" window.location.protocol = "http:" window.location.hostname = "www.site.ru" window.location.port = 80 window.location.host = "www.site.ru:80" window.location.pathname = "dir/page.cgi" window.location.search = "?product=phone&id=3" window.location.hash = "#mark"

Как уже говорилось в предыдущих лекциях, к свойствам объектов можно обращаться как с помощью точечной нотации (как выше), так и с помощью скобочной нотации , например: window. location [" host "] .

Методы объекта location

Методы объекта location предназначены для управления загрузкой и перезагрузкой страницы. Это управление заключается в том, что можно либо перезагрузить текущий документ (метод reload () ), либо загрузить новый (метод replace () ).

window.location.reload(true);

Метод reload () полностью моделирует поведение браузера при нажатии на кнопку Reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true , то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Такое поведение соответствует простому нажатию кнопки Reload браузера (клавиши F5 в Internet Explorer ). Если в качестве аргумента указать false , то браузер перезагрузит текущий документ с сервера, несмотря ни на что. Такое поведение соответствует одновременному нажатию клавиши Shift и кнопки браузера Reload (или Ctrl+F5 в Internet Explorer ).

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

window.location.href="http://www.newsite.ru/"; window.location.replace("http://www.newsite.ru/");

Разница между ними - в отображении этого действия в истории посещений страниц window. history . В первом случае в историю посещений добавится новый элемент, содержащий адрес " http://www.newsite.ru/ ", так что при желании можно будет нажать кнопку Back на панели браузера, чтобы вернуться к прежней странице. Во втором случае новый адрес " http://www.newsite.ru/ " заместит прежний в истории посещений, и вернуться к прежней странице нажатием кнопки Back уже будет невозможно.

История посещений (history)

История посещений страниц World Wide Web позволяет пользователю вернуться к странице, которую он просматривал ранее в данном окне браузера. История посещений в JavaScript трансформируется в объект window. history . Этот объект указывает на массив URL-страниц, которые пользователь посещал и которые он может получить, выбрав из меню браузера режим Go. Методы объекта history позволяют загружать страницы, используя URL из этого массива.

Чтобы не возникло проблем с безопасностью браузера, путешествовать по History можно, только используя индекс. При этом URL, как текстовая строка, программисту недоступен. Чаще всего этот объект используют в примерах или страницах, на которые могут быть ссылки из нескольких разных страниц, предполагая, что можно вернутся к странице, из которой пример будет загружен:

Данный код отображает кнопку "Назад", нажав на которую, мы вернемся на предыдущую страницу. Аналогичным образом действует метод history . forward () , перенося нас на следующую посещенную страницу.

Существует также метод go() , имеющий целочисленный аргумент и позволяющий перескакивать на несколько шагов вперед или назад по истории посещений. Например, history .go(-3) перенесет нас на 3 шага назад в истории просмотра. При этом методы back() и forward () равносильны методу go() с аргументами -1 и 1 , соответственно. Вызов history .go(0) приведет к перезагрузке текущей страницы.

Тип браузера (navigator)

Часто возникает задача настройки страницы на конкретную программу просмотра (браузер). При этом возможны два варианта: определение типа браузера на стороне сервера, либо на стороне клиента. Для последнего варианта в арсенале объектов JavaScript существует объект window. navigator . Важнейшие из свойств этого объекта перечислены ниже.

Рассмотрим простой пример определения типа программы просмотра.

Источник: http://learn.javascript.ru/browser-objects

navigator: платформа и браузер

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

• navigator.userAgent — содержит информацию о браузере.
• navigator.platform — содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п..

alert(navigator.userAgent); alert(navigator.platform); screen

Объект screen содержит общую информацию об экране, включая его разрешение, цветность и т.п. Оно может быть полезно для определения, что код выполняется на мобильном устройстве с маленьким разрешением.

Текущее разрешение экрана посетителя по горизонтали/вертикали находится в screen.width / screen.height .

Это свойство можно использовать для сбора статистической информации о посетителях.

JavaScript-код счетчиков считывает эту информацию и отправляет на сервер. Именно поэтому можно просматривать в статистике, сколько посетителей приходило с каким экраном.

location

Объект location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL. Значением этого свойства является объект типа Location .

Методы и свойства Location

Самый главный метод — это, конечно же, toString . Он возвращает полный URL.

Код, которому нужно провести строковую операцию над location, должен сначала привести объект к строке. Вот так будет ошибка:

// будет ошибка, т.к. location - не строка alert(window .location.indexOf("://" ));

А так - правильно:

// привели к строке перед indexOf alert((window .location + "" ).indexOf("://" ));

Все следующие свойства являются строками. Колонка «Пример» содержит их значения для тестового URL:

Методы объекта Location

assign(url) загрузить документ по данному url. Можно и просто приравнять window.location.href = url .

reload() перезагрузить документ по текущему URL. Аргумент forceget - булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.

replace(url) заменить текущий документ на документ по указанному url.

toString() Возвращает строковое представление URL.

При изменении любых свойств window.location , кроме hash , документ будет перезагружен, как если бы для модифицированного url был вызван метод window.location.assign() .

Можно перенаправить и явным присвоением location , например:

// браузер загрузит страницу http://javascript.ru window .location = "http://javascript.ru" ; frames

Коллекция, содержащая фреймы и ифреймы. Можно обращаться к ним как по номеру, так и по имени.

В frames содержатся window-объекты дочерних фреймов. Следующий код переводит фрейм на новый URL:

window .frames.example.location = "http://example.com" ; history

Объект history позволяет менять URL без перезагрузки страницы (в пределах того же домена) при помощи History API , а также перенаправлять посетителя назад-вперед по истории.

Объект history не предоставляет возможности читать историю посещений. Можно отправить посетителя назад вызовом history.back() или вперед вызовом history.forward() , но сами адреса браузер не дает из соображений безопасности.

Итого

Браузерные объекты:

• navigator, screen Содержат информацию о браузере и экране.
• location Содержит информацию о текущем URL и позволяет её менять. Любое изменение, кроме hash , перегружает страницу. Также можно перегрузить страницу с сервера вызовом location.reload(true) .
• frames Содержит коллекцию window-объектов для каждого из дочерних фреймов. Каждый фрейм доступен по номеру (с нуля) или по имени, что обычно удобнее.
• history Позволяет отправить посетителя на предыдущую/последующую страницу по истории, а также изменить URL без перезагрузки страницы с использованием History API.

Данный объект является чисто информационным. Он предоставляет информацию о браузере.

В качестве примера использования navigator выведем все свойства браузера:

< script type= "text/javascript" > document. writeln (); for (var property in navigator) { document. write ("" + property+ ":" ); document. writeln (navigator[ property]); } Объект history

Отвечает за 2 кнопки: ‘вперед’ и ‘назад’. Браузер, переходя по ссылка от страницы к странице, сохраняет историю этих переходов. Т.е. можно вернуться на страницу назад или перейти на страницу вперед. Имитировать нажатие этих кнопок можно из javaScript, используя методы и свойства.

У объекта есть свойство - length - длина.

У объекта есть методы: go (), back (), forward ().

Рассмотрим пример:

< script type= "text/javascript> function length(){ //показывает количество переходов alert(" Количество переходов: "+history.length);} function back(){ //переходим назад history.back();} function forward(){ //переходим вперед на 1 переход history.forward();} Объект location

Отвечает за адресную строку. Позволяет получить и изменить адрес страницы. Как только адрес меняется, браузер автоматически переходит по новому адресу. Т.е. можно сымитировать переход по адресу.

Есть свойства :

• hash - метка.
• host - hostname + port.
• hostname – это www и.ru в адресе сайта.
• href - содержит адресную строку. Здесь можно написать другой адрес, и браузер перейдет по этому адресу.
• pathname – сама страница.
• port - используемый пост.
• protocol - это http:// или ftp://.
• search – параметры после знака вопроса.

Есть методы :

• assign () - переход по указанному адресу.
• reload () - имитация нажатия кнопки ‘обновить’.
• replace () – переход по указанному адресу, но на открытой странице нет кнопки назад, т.е. не сохраняет данную страницу в истории.

Объект screen

Это чисто информационный объект. Он сообщает размер экрана пользователя в пикселях. У него нет методов, есть только свойства:

• availHeight – доступная высота экрана.
• availWidth – доступная ширина экрана.
• colorDepth – количество битов, отводимое для хранения цветов (сейчас не используется).
• height - высота экрана пользователя.
• width - ширина экрана пользователя.
• updateInterval - частота обновления экрана ЭЛТ (не используется).

Объект navigator содержит информацию о браузере пользователя (в частности - доступно ли использование cookie файлов и включена ли поддержка Java ).

Также объект navigator позволяет определить тип операционной системы.

Для удобства работы с объектом navigator выведем все его свойства на экран. Вспоминаем материал из предыдущего урока .

var any ;

/* Цикл по свойствам для объекта navigator */
for(any in navigator )
{
document .write (any + "
" );
}

Информацию о браузере - свойство userAgent ;

Язык браузера - свойство language ;

Название операционной системы - свойство oscpu ;

Включены ли куки - свойство cookieEnable d;

Подключен ли пользователь к сети Интернет - свойство onLine .

Доступ к свойствам объекта navigator осуществляется через точку.

document .write ("Название браузера: " + navigator .userAgent + "
" );
document .write ("Язык браузера: " + navigator .language + "
" );
document .write ("Название ОС: " + navigator .oscpu + "
" );
document .write ("Включены ли куки: " + navigator .cookieEnable d + "
" );
document .write ("Подключение к сети: " + navigator .onLine + "
" );

Объект screen поможет получить данные о разрешении экрана пользователя, о глубине цвета и др.

С объектом screen поступим аналогично: сначала выведем на экран все его свойства.

var any ; /* Произвольная переменная */

/* Цикл по свойствам для объекта screen */
for(any in screen )
{
document .write (any + "
" );
}

Теперь при помощи свойств height и width объекта screen получим информацию: о разрешении экрана - его высоте и ширине в пикселях. А также о битовой глубине цветовой палитры - свойство colorDepth .

document .write ("Высота экрана: " + screen .height + "px
" );
document .write ("Ширина экрана: " + screen .width + "px
" );

document .write ("Глубина цвета: " + screen .colorDepth + "
" );

Объект location возвращает URL-адрес текущего окна пользователя.

А также содержит данные о частях и компонентах текущего адреса: имя хоста, номер порта, протокол и т.д.

Свойства объекта location .

var any ; /* Произвольная переменная */

/* Цикл по свойствам для объекта location */
for(any in location )
{
document .write (any + "
" );
}

Воспользуемся свойством href объекта location , чтобы вывести на экран URL-адрес текущего документа.

document.write ("URL-адрес: " + location .href ) ;

Выполним домашнее задание по этому уроку.

Выясните, с какого браузера человек зашел на вашу страничку и, в зависимости от браузера, выведите на экран:

Если firefox: "Ваш браузер Firefox."
Если opera: "Ваш браузер Opera."
Если chrome: "Ваш браузер Chrome."

Для решения этого домашнего задания нужно :

При помощи свойства userAgent объекта navigator получить информацию о текущем браузере.

На момент решения этой задачи я получил следующие данные о браузерах Firefox , Opera и Chrome .

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:56.0) Gecko/20100101 Firefox /56.0

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome /61.0.3163.100 Safari/537.36 OPR /48.0.2685.39

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome /61.0.3163.100 Safari/537.36

При помощи регулярных выражений найти названия браузеров из информации о них .

var browsers = navigator .userAgent ; /* Информация о текущем браузере */

/* Составляем регулярные выражения для поиска совпадений в данных о браузере */
var regV_1 = /firefox/ i ; /* i - регистронезависимый шаблон */
var regV_2 = /chrome/ i ;
var regV_3 = /opr/ i ;

/* Составляем условия */
if (browsers .match (regV_1 ) != null )
{
document.write ("Ваш браузер - Firefox" );
}

/* Здесь учитываем, что Chrome присутствует в описании для Opera */
else if(browsers .match (regV_2 ) != null && browsers .match (regV_3 ) != "OPR" )
{
document.write ("Ваш браузер - Chrome ");
}

else if(browsers .match (regV_3 ) != null )
{
document.write ("Ваш браузер - Opera" );
}

else
{
document.write ("Вы используете НЕ известный браузер" );