Объект location на Javascript

Javascript

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

Таблица свойств объекта locations

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

Пример адресной строки для наглядного восприятия:

Объект location на Javascript

Важно! Изменение 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

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

Приведем некоторые примеры

При нажатии на ссылку загрузим в один фрейм страницу 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>

Откроем новое окно, в котором будем управлять адресной строкой с помощью методов объекта 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>

Если у вас остались какие-то вопросы по этому материалу, задавайте их в комментариях. Также вы можете поделиться своими проблемами или опытом.

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector