Объект Location в JavaScript - URL документа

Александр Мальцев
Александр Мальцев
24K
6
Содержание:
  1. Объект location
  2. Комментарии

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

Объект location

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

window.location

Объект location содержит свойства и методы, с помощью которых Вы можете не только получить текущий адрес страницы (URL или его части: имя хоста, номер порта, протокол и т.д.), но и изменить его.

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

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

  • hash - устанавливает или возвращает якорную часть (#) URL;
  • host - устанавливает или возвращает имя хоста и номер порта URL;
  • hostname - устанавливает или возвращает имя хоста URL;
  • href - устанавливает или возвращает содержимое URL;
  • origin - возвращает протокол, имя хоста и номер порта URL;
  • pathname - устанавливает или возвращает часть URL, содержащей путь;
  • port - устанавливает или возвращает номер порта URL;
  • protocol - устанавливает или возвращает протокол URL;
  • search - устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&...);

В качестве примера рассмотрим следующую адресную строку (URL):

JavaScript - Объект location

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

Например, изменить href на http://itchief.ru для текущего окна:

window.location.href = "http://itchief.ru";
//для текущего окна "window." можно опустить
location.href = "http://itchief.ru";
//кроме этого свойство href тоже можно опустить, т.к. location == location.href
location = "http://itchief.ru";

Например, изменить href для окна с именем myWindow:

//откроем новое окно с помощью метода JavaScript open()
var myWindow = window.open("","","height=300,width=400");
//изменим location окна, идентификатор которого хранится в myWindow
myWindow.location.href = "http://itchief.ru";

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

<div id="propertiesLocation" class="alert alert-warning"></div>

<script>
  var stringPropertiesLocation = "";
  for (var property in location)
  {
    stringPropertiesLocation += "Свойство/метод: <strong>" + property + "</strong>. ";
    stringPropertiesLocation += "Значение: <strong>" + location[property] + "</strong> ";
    stringPropertiesLocation += "<strong>Тип: </strong>" + typeof location[property]; 
    stringPropertiesLocation += "<br />";
  }
  document.getElementById("propertiesLocation").innerHTML = stringPropertiesLocation;
</script>

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

Методы:

  • assign() - загружает новый документ в текущее окно (вкладку) браузера или в то окно для которого этот метод был вызван.
  • reload() - перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true, то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false, то браузер может обновить страницу, используя данные своего кэша. Метод reload() "имитирует" нажатие кнопки обновить в браузере.
  • replace() - заменяет текущий документ с помощью нового документа, URL которого указан в качестве параметра.

Рассмотрим следующие примеры:

1. При нажатии на ссылку загрузим в 1 фрейм страницу http://nigma.ru/:

<script>
  function loadNigma() {
    window.frames[0].location.assign("http://nigma.ru/");
  }
</script>
...
<!-- Загрузить URL http://yandex.ru в 1 фрейм -->
<a href="javascript:loadNigma()">Загрузить nigma во фрейм</a>
<hr />
<iframe width="500" height="400"></iframe>

2. Откроем новое окно, в котором будем управлять адресной строкой с помощью методов объекта location:

<script>
  let newWindow;
  function openWindow() {
    if (!newWindow) {
      newWindow = window.open('https://itchief.ru/', '', 'width=400,height=500');
      newWindow.focus();
    } else {
      newWindow.focus();
    }
  }
  function assignWindow() {
    if (newWindow) {
      newWindow.location.assign('https://itchief.ru/javascript/');
      newWindow.focus();
    }
  }
  function replaceWindow() {
    if (newWindow) {
      newWindow.location.replace('https://itchief.ru/html-and-css/');
      newWindow.focus();
    }
  }
</script>

<ul>
  <li><a href="javascript:openWindow()">Создать окно «https://itchief.ru/»</a></li>
  <li><a href="javascript:assignWindow()">Загрузить «https://itchief.ru/javascript/»</a></li>
  <li><a href="javascript:replaceWindow()">Заменим страницу на «https://itchief.ru/html-and-css/»</a></li>
</ul>

Комментарии:

  1. alexeyFCSM
    alexeyFCSM
    25.12.2021, 11:31
    Александр, здравствуйте! подскажите, пожалуйста, как с помощью location.hash реализовать переход с другой страницы сайта на главную (к примеру) и сразу открыть нужный таб.

    Cуть такова: есть главная страница, на которой расположен блок продукции с табами (фасад, кровля и т. д.). для каждого таба открывается своя продукция. Переход с этой страницы, используя пункты меню в шапке, я реализовал, табы сразу открываются нужные. а вот переход с другой страницы происходит только по якорной ссылке. и таб открывается только тот, который по-умолчанию сразу открыт. Заранее спасибо за помощь)
    1. Александр Мальцев
      Александр Мальцев
      25.12.2021, 12:12
      Добрый день! Как это реализовать посмотрите в этом комментарии.
      1. alexeyFCSM
        alexeyFCSM
        25.12.2021, 20:54
        Александр, спасибо большое за ответ) подскажите, а если табы реализованы не ссылками (тегом a), а button, можно это реализовать? просто не будет тогда атрибута href.
        1. Александр Мальцев
          Александр Мальцев
          26.12.2021, 03:53
          Семантически <button> предназначены для выполнения действий на этой же странице, а для перехода на другие <a>.
          Но, если у вас при нажатии на <button> осуществляется переход на другую страницу, значит вы где-то это делаете в коде. В этом месте вам нужно добавить к URL нужный хеш или GET-атрибут (как вам удобнее). Далее на странице куда этот URL ведёт, вам нужно написать JavaScript код, который будет после того, как DOM готов, получать URL, разбирать его (получать хэш или соответствующий GET-атрибут), а далее в соответствии с ним переключать нужный таб.
    2. Evgen
      Evgen
      23.04.2021, 18:13
      Не пойму почему, но в последнем примере у меня не работает ссылка
      <a href= "javascript:myWindowAssign()">Загрузить URL http://www.yandex.ru</a>

      С методом replace — работает, assign — нет.
      1. Александр Мальцев
        Александр Мальцев
        24.04.2021, 14:26
        В случае с «location.assign» чтобы выполнить эти действия (получить доступ) части адреса (протокол, имя хоста и порт) должны совпадать с нашим доменом.
        Когда создавался пример такой политики ещё не было в браузерах. Обновил пример и добавил возможность его запустить в песочнице.
      Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.