Программируем свойства окна браузера. Объекты navigator, screen и location - Информация о браузере и разрешении экрана - Текущий URL 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 ("Вы используете НЕ известный браузер" );

    Поле адреса в браузере обычно располагается в верхней части окна и отображает 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 . Важнейшие из свойств этого объекта перечислены ниже.

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

    Объект navigator

    Объект navigator служит для доступа к самой программе Web-обозревателя. Не путайте его с объектом window , представляющем текущее окно Web-обозревателя, и названием программы Netscape Navigator.

    appCodeName

    Возвращает имя кода программы Web-обозревателя. И для Internet Explorer, и для Navigator вернет строку "Mozilla".

    appMinorVersion

    Возвращает младшую цифру номера версии программы Web-обозревателя. Например, для Internet Explorer 5.0 вернет "0", а для 5.5 - "5".

    Поддерживается только Internet Explorer начиная с 4.0

    Возвращает имя программы Web-обозревателя, например, "Netscape" или "Microsoft Internet Explorer".

    appVersion

    Возвращает версию программы Web-обозревателя.

    browserLanguage

    Возвращает код программы Web-обозревателя.

    cookieEnabled

    Возвращает true, если Web-обозревателю разрешен пользователем прием cookie. Поддерживается только IE начиная с 4.0

    cpuClass

    Возвращает класс процессора клиентского компьютера, например, "x86" или "Alpha". Поддерживается только IE начиная с 4.0

    language

    Возвращает код языка программы Web-обозревателя. Поддерживается только NN начиная с 4.0

    Возвращает true, если клиент в настоящее время подключен к интернету (находится в режиме on-line), и false, если отключен (off-line).

    Поддерживается только IE начиная с 4.0

    platform

    Возвращает название клиентской платформы, например, "Win32".

    systemLanguage

    Возвращает код языка операционной системы клиента. Поддерживается только IE начиная с 4.0

    userAgent

    Возвращает строку, идентифицирующую Web-обозреватель клиента. Является комбинацией значений свойств appCodeName и appVersion.

    userLanguage

    То же самое, что browserLanguage.

    Поддерживается только IE начиная с 4.0

    Объект navigator поддерживает, кроме того, метод javaEnabled() , возвращающий true, если Web-обозревателю разрешено пользователем выполнение сценариев JavaScript.

    Немного более подробно хотелось бы сказать о свойстве appVersion , а точнее о возвращаемом им значении. Все дело в том, что у IE и NN оно будет разным.

    Вот какой формат будет у Navigator:

    {Версия} [{Язык}] ({Операционная система}; U|I)

    Здесь {Версия} представляет собой версию Web-обозревателя, {Язык} - язык программы (но может и отсутствовать), {Операционная система} - обозначение операционной системы клиента, например, "Win96", "Win16" или "WinNT", буква "U" - американскую версию программы, а "I" - интернациональную.

    Например:

    4.0 (Win95; I)

    У Internet Explorer формат вывода значений свойства appVersion другой:

    {Совместимая версия Navigator} (compatible; {Версия}; {Операционная система})

    Здесь {Операционная система} может принимать значения "Windows 3.1", "Windows 3.11", "Windows 95" или "Windows NT".

    2.0 (compatible; 3.01; Win95)

    Свойство userAgent возвращает значение, имеющее формат:

    {Значение appCodeName}/{Значение appVersion}

    То есть, для двух предыдущих примеров мы получим следующие значения:

    Mozilla/4.0 (Win95; I)Mozilla/2.0 (compatible; 3.01; Win95)

    Из книги Linux для пользователя автора Костромин Виктор Алексеевич

    14.4.2 Браузеры Netscape Navigator и Mozilla Netscape Navigator - мой любимый браузер. Я пользовался им и тогда, когда работал под Windows, и с удовольствием обнаружил, что он включен в состав дистрибутива Black Cat 5.2, а также во все другие дистрибутивы, которыми я до сих пор пользовался. Поэтому установка

    Из книги Программирование автора Козлова Ирина Сергеевна

    54. Netscape Navigator По мнению пользователей, данный модуль работает очень прилично и иногда даже превосходит в скорости работы органов управления ActiveX сам Internet Explorer. Но надежность его вызывает нарекания. Если очень долго и интенсивно работать со страницами, которые насыщены

    Из книги 3ds Max 2008 автора Верстак Владимир Антонович

    Окно Material/Map Navigator (Путеводитель по материалам и картам) Каждый материал сцены может содержать любое количество подматериалов, которыми могут быть другие материалы или текстурные карты. Подматериалы можно редактировать при помощи свитков, в которых они содержатся, но

    Из книги Photoshop CS3: Обучающий курс автора Тимофеев Сергей Михайлович

    Панель Navigator (Навигатор) Панель Navigator (Навигатор), отображенная на рис. 4.2, позволяет нам наиболее удобным образом осуществлять навигацию по изображению, а именно производить масштабирование и перемещение по листу. Рис. 4.2. Панель Навигатор в правой верхней части

    Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

    Объект TextStream Объект TextStream обеспечивает последовательный (строка за строкой) доступ к текстовому файлу. Методы этого объекта позволяют читать информацию из файла и записывать ее в него.Создать объект TextStream можно с помощью следующих методов:? CreateTextFile объектов FileSystemObject и

    Из книги Справочник по JavaScript автора Коллектив авторов

    Объект document Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.activeElementИспользуется в сценарии для получения ссылки

    Из книги Приемы создания интерьеров различных стилей автора Тимофеев С. М.

    Объект location Объект location содержит информацию о местонахождении текущего документа, т.е. его интернет-адрес. Его также можно использовать для перехода на другой документ и перезагрузки текущего документа.Свойства объекта locationМетоды объекта locationПользуясь объектом location,

    Из книги Мир InterBase. Архитектура, администрирование и разработка приложений баз данных в InterBase/FireBird/Yaffil автора Ковязин Алексей Николаевич

    Объект style Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы:иСвойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не

    Из книги Цифровая фотография. Трюки и эффекты автора Гурский Юрий Анатольевич

    Объект style в Navigator. JavaScript-стили Navigator поддерживает прямое обращение по идентификаторам только для объектов layer и не поддерживает коллекцию all. Да и поддержка атрибута ID в нем реализована так себе, в основном, для присвоения элементам стилей. Но объект document Navigator

    Из книги автора

    Объект window Объект window представляет текущее окно Web-обозревателя или отдельный фрейм, если окно разделено на фреймы.closedВозвращает true, если текущее окно закрыто. Может быть использовано при работе с несколькими окнами.defaultStatusСообщение по умолчанию, отображаемое в строке

    Из книги автора

    Объект layer Все слои, определенные в документе, доступны как элементы коллекции layers.document.layers;document.layers["somelayer"];NN поддерживает прямой доступ к слоям по имени. Имена слоям даются с помощью атрибута NAME тегов и :document.somelayer;Для доступа к слою, находящемуся внутри

    Из книги автора

    Объект navigator Объект navigator служит для доступа к самой программе Web-обозревателя. Не путайте его с объектом window, представляющем текущее окно Web-обозревателя, и названием программы Netscape Navigator.appCodeNameВозвращает имя кода программы Web-обозревателя. И для Internet Explorer, и для Navigator

    Из книги автора

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

    Из книги автора

    Объект Все, что находится в трехмерном виртуальном пространстве сцены - это объекты. Термин "объект" обозначает нечто, находящееся в трехмерном мире. Что бы мы ни создали в виртуальном пространстве, это будет объект.Существует множество видов объектов. Принадлежность

    Из книги автора

    SQL Navigator Это наиболее интересная часть FIBPlus Tools, не имеющая аналогов в других продуктах. Фактически это инструмент централизованной обработки SQL в рамках целого приложения (рис. 2.54): Рис 2.54. Внешний вид SQL NavigatorSQLNavigator позволяет разработчику сосредоточиться на написании и

    Из книги автора

    Палитра Navigator (Навигатор) Эта палитра выполняет две задачи, которые нужно различать: навигацию и масштабирование (рис. 8.9). Рис. 8.9. Элементы палитры Navigator (Навигатор)1. Рабочая область. Состоит из двух частей – небольшой копии всего открытого изображения и ограничивающей