На этом уроке мы познакомимся с объектом 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> 
var myWindow;
function myWindowOpen()
{ 
  if (!myWindow) 
	  myWindow = window.open("https://www.google.com","","width=400,height=500"); 
} 
function myWindowAssign() { 
  if (myWindow)
    myWindow.location.assign("http://www.yandex.ru");
}
function myWindowReplace() { 
  if (myWindow)
    myWindow.location.replace("http://www.bing.com");
}
</script>
...
<a href="javascript:myWindowOpen()">Открыть окно</a>
<br />
<a href= "javascript:myWindowAssign()">Загрузить URL http://www.yandex.ru</a>
<br />
<a href="javascript:myWindowReplace()">Заменим страницу на URL https://www.bing.com</a>