Объект location

Объект location

Здравствуйте! Продолжаем знакомиться с браузерной моделью BOM.  И сегодня на очереди у нас очень интересный объект  location, который  содержит информацию о расположении текущей веб-страницы: URL (адрес страницы), информацию о сервере, номер порта, протокол. С помощью свойств  этого объекта вы можете получить такую информацию:

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

bom модель в javascript

Например, пусть имеется следующая веб-страница location.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, то кэш не используется. В Mozilla Firefox надо использовать window.location =  window.location для перезагрузки страницы.
  • replace(url): заменяет текущую веб-станицу другим ресурсом, который находится по пути url. В отличие от метода assign, который также загружает веб-станицу с другого ресурса, метод replace не  будет сохранять предыдущую веб-страницу в стеке истории переходов history, поэтому вы не сможем вызвать метод history.back() для перехода к ней.
Читайте также  Browser Object Model и объект окна window

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

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

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

location.replace("index.html");

Пример на использование location.search

Давайте разберем пример, который  продемонстрирует использование метода search объекта location.  Пусть имеется  страница gallery.html на которой  есть картинки в  виде ссылок и ведут они на другую страницу, на которой уже картинка  показывается в большом размере.

<a href="show_pic.html?kubiki.jpg" target="_blank">
    <img src="../images/small/kubiki.jpg" /></a> 
<a href="show_pic.html?kubiki.jpg" target="_blank">
    <img src="../images/small/kubiki.jpg" /></a> 
<a href="show_pic.html?kubiki.jpg" target="_blank">
    <img src="../images/small/kubiki.jpg" /></a> 

Просмотреть  пример

А на странице show_pic.html пусть будет такой код:

<body>
    <p style="text-align: center;">
        <img src="" name="bigImage" /><br />
        <i id="fname"></i>
    </p>
    <script type="text/javascript">
        var src=location.search.slice(1);
        document.images["bigImage"].src="../images/"+src;
        fname.innerText = src;
    </script>
</body>

Данный файл является как бы шаблоном для отображения рисунка. Имя файла рисунка передается сценарию свойством location.search.
Так как location.search возвращает параметры вместе с предшествующим им знаком вопроса, мы должны от него избавиться. Для этого в коде примере используется вызов метода location.search.slice(1); (получить часть строки от символа №1 до конца строки).

ИТОГИ

Объект location используется для получение  информации об  адресе страницы, порте, протоколе  и также имеет  ряд интересных свойств, таких как  search и hash.

Свойство search позволяет получить  часть строки, находящиюся после знака  вопроса если оный содержится в  строке адресной.

Свойство hash действует  аналогично своству search, только  возвращает часть строки после  знака #.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: