JavaScript - Объект location
На этом уроке мы познакомимся с объектом 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):
Примечание: Изменение 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>
Комментарии ()