Об'єкти navigator, screen і location - Інформація про браузер і дозвіл екрана - Поточний URL. Програмуємо властивості вікна браузера Javascript об'єкт window navigator назву браузера
Поле адреси в браузері зазвичай розташовується у верхній частині вікна і відображає 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служить для доступу до самої програми 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
appName
Повертає ім'я програми 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
onLine
Повертає 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)
Даний об'єкт є суто інформаційним. Він надає інформацію про браузер.
Як приклад використання 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 виведемо всі його властивості на екран. Згадуємо матеріал з попереднього уроку.
Інформацію про браузері - властивість userAgent;
Мова браузера - властивість language;
Назва операційної системи - властивість oscpu;
Чи включені куки - властивість cookieEnable d;
Чи підключений користувач до мережі Інтернет - властивість onLine.
Доступ до властивостей об'єкта navigator здійснюється через точку.
Об'єкт screen допоможе отримати дані про дозвіл екрана користувача, про глибину кольору та ін.
З об'єктом screen вчинимо аналогічно: спочатку виведемо на екран всі його властивості.
Тепер за допомогою властивостей height і width об'єкта screen отримаємо інформацію: про дозвіл екрана - його висоті і ширині в пікселях. А також про бітової глибині кольорової палітри - властивість colorDepth.
об'єкт location повертає URL-адресупоточного вікна користувача.
А також містить дані про частини і компонентах поточного адреси: ім'я хоста, номер порту, протокол і т.д.
властивості об'єкта location.
Скористаємося властивістю href об'єкта location, щоб вивести на екран URL-адресу поточного документа.
Виконаємо домашнє завдання з цього уроку.
З'ясуйте, з якого браузера людина зайшла на вашу сторінку і, в залежності від браузера, щоб відобразити:
Якщо 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
За допомогою регулярних виразів знайти назви браузерів з інформації про них.