Window #erase#location href получить значение по php. Переадресация JavaScript: перенаправление со страницы после события или действия пользователя. Методы переадресации JavaScript

Объект location содержит информацию об URL-адресе текущей Web-страницы.

Свойства объекта location :
□ href — полный URL-адрес документа;
□ protocol — идентификатор протокола;
□ port — номер порта;
□ host — имя компьютера в сети Интернет, вместе с номером порта;
□ hostname — имя компьютера в сети Интернет;
□ pathname — путь и имя файла;
□ search — строка параметров, указанная после знака "?" (включая этот знак);
□ hash — имя "якоря" (закладки) в документе, указанное после знака "#" (включая этот знак).

Методы объекта location :
□ assign() загружает документ, URL-адрес которого указан в качестве параметра;
□ reload() перезагружает документ;
□ replace() загружает документ, URL-адрес которого указан в качестве параметра. При этом информация об URL-адресе предыдущего документа удаляется из объекта history.

Загрузить новый документ можно не только с помощью методов assign() или replace() , но и присвоив новый URL-адрес свойству href объекта location :

Window . location .href = "newURL.html" ;

Если нужно загрузить документ в какой-либо фрейм, то сначала необходимо указать имя фрейма:

frameName. location .href = "newURL.html" ;

frameName. location .assign("newURL.html" );

Для примера разберем URL-адрес документа на составляющие (листинг 3.54).

Листинг 54 . Информация об URL-адресе

Информация об URL-адресе Информация об URL-адресе

Через строку URL-адреса могут передаваться некоторые параметры для программы, расположенной на сервере. Например, для просмотра многостраничного каталога может передаваться номер страницы. Но параметры могут быть переданы и HTML-документу. В листинге 55 приведен пример создания многостраничного HTML-документа.

Листинг 55 . Многостраничный HTML-документ

Многостраничный HTML-документ Страница 1
Страница 2
Страница 3

У этого метода есть большой минус. HTML-документ будет всегда содержать все фрагменты. При этом посетителю будет показываться только тот фрагмент, который задан параметрами. Однако при каждом переходе по ссылкам документ будет заново загружаться с сервера. Если документ имеет большой размер, то он каждый раз будет долго загружаться только ради одного фрагмента. А зачем? Ведь все нужные фрагменты уже есть в документе! По этой причине лучше воспользоваться свойством display объекта style , а не передавать параметры через URL-адрес. В листинге 56 показан пример использования свойства display объекта style .

Листинг 56 . Использование свойства display объекта style

Многостраничный HTML-документ div div { border: #FFE9B3 1px solid ; background-color: #FFFBEF; min-height: 100px; margin: 10px 5px 10px 5px } Многостраничный HTML-документ Страница 1 Содержание страницы 1. Страница 2 Содержание страницы 2. Страница 3 Содержание страницы 3.

Этот пример и выглядит гораздо проще, и не требует никакой перезагрузки страницы.

Свойство только для чтения Window.location возвращает объект Location с информацией о текущем расположении документа.

Хотя Window.location представляет собой объект только для чтения Location , вы можете присвоить ему DOMString . Это значит что в большинстве случаев вы можете работать с location как со строкой: location = "http://www.example.com" это синоним для location.href = "http://www.example.com" .

Синтаксис var oldLocation = location; location = newLocation ; Примеры Базовый пример alert(location); // выведет сообщение "https://сайт/en-US/docs/Web/API/Window.location" Пример №1: Переход на новую страницу

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

Location.assign("http://www.mozilla.org"); // или location = "http://www.mozilla.org";

Пример №2: Принудительная перезагрузка текущей страницы с сервера location.reload(true); Пример №3

Рассмотрим следующий пример, который будет перезагружать страницу используя метод replace() для вставки значения location.pathname в хэш:

Function reloadPageWithHash() { var initialPage = location.pathname; location.replace("http://example.com/#" + initialPage); }

Примечание: Пример выше работает в ситуациях, когда нет необходимости сохранять (оставлять) location.hash. Между тем, в Gecko-based браузерах, установка location.pathname таким образом будет очищать любую информацию в location.hash, в то время как в WebKit (и возможно в других браузерах), установка pathname не изменяет hash. Если вам необходимо изменить pathname но сохранить hash как есть, используйте метод replace(), который должен работать одинаково во всех браузерах.

Пример №4: Отображение свойств текущего URL в диалоге alert function showLoc() { var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ]; for (var sProp in oLocation){ aLog.push(sProp + " (" + (typeof oLocation) + "): " + (oLocation || "n/a")); } alert(aLog.join("\n")); } // в html: Показать свойства location Пример №5: Отправка строки данных на сервер через изменение свойства search function sendData (sData) { location.search = sData; } // в html: Отправить данные

Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).

Пример №6: Использование закладок без изменения свойства hash MDN Example function showNode (oNode) { var nLeft = 0, nTop = 0; for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent); document.documentElement.scrollTop = nTop; document.documentElement.scrollLeft = nLeft; } function showBookmark (sBookmark, bUseHash) { if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; } var oBookmark = document.querySelector(sBookmark); if (oBookmark) { showNode(oBookmark); } } span.intLink { cursor: pointer; color: #0000ff; text-decoration: underline; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.

Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.

[ Go to bookmark #2 ]

Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.

Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.

Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.

Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.

Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.

[ Go to bookmark #1 | Go to bookmark #1 without using location.hash | Go to bookmark #3 ]

Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.

Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.

Here is the bookmark #3

Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.

Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.

Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.

Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.

Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.

Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.

Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.

Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.

Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.

Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.

Примечание: функция showNode является также примером использования цикла for без раздела statement . В этом случае точка с запятой всегда добавляется сразу после декларации цикла.

…тоже самое только с анимированной прокруткой страницы:

Var showBookmark = (function () { var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, /* * nDuration: the duration in milliseconds of each frame * nFrames: number of frames for each scroll */ nDuration = 200, nFrames = 10; function _next () { if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } _isBot = true; document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames); document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames); if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } _itFrame++; } function _chkOwner () { if (_isBot) { _isBot = false; return; } if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } } if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); } else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); } return function (sBookmark, bUseHash) { _scrollY = document.documentElement.scrollTop; _scrollX = document.documentElement.scrollLeft; _bookMark = sBookmark; _useHash = arguments.length === 1 || bUseHash; for (var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark); oNode; nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent); _nodeX = nLeft, _nodeY = nTop, _itFrame = 1; if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); } }; })();

Спецификации Спецификация Статус

В этой статье мы покажем, как можно организовать перенаправление со страницы, используя JavaScript location . Неожиданные перенаправления считаются очень раздражающими с точки зрения пользователей, поскольку они отрицательно влияют на общее впечатление. Например, если вы перенаправляете пользователей на другой сайт сразу после их перехода на ваш. Также, если вы направите на постороннюю страницу по таймеру или после того, как они совершили определенное действие. Это приведет к тому, что пользователь захочет сразу же покинуть ваш сайт.

Кроме этого поисковые системы не жалуют ресурсы, использующие переадресацию, особенно если они вводят пользователей в заблуждение. Но существуют случаи, когда перенаправление может быть полезно. Поэтому мы оставляем за вами принятие решения, использовать переадресацию или нет.

Методы переадресации JavaScript

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

//Устанавливает новое местоположение текущего окна. window.location = "http://www.example.com"; //Устанавливает новую гиперссылку (URL) для текущего окна. window.location.href = "http://www.example.com"; // Присваивает новый URL текущему окну. window.location.assign("http://www.example.com"); //Заменяет положение текущего окна на новое. window.location.replace("http://www.example.com"); //Задает местоположение самого текущего окна. self.location = "http://www.example.com"; // Задает положение самого верхнего окна относительно текущего. top.location = "http://www.example.com";

Хотя приведенные выше строки JavaScript кода выполняют схожую работу, у них есть небольшие отличия. Например, если вы используете перенаправление top.location внутри элемента iframe , то это принудительно перенаправит на главное окно. Еще один момент, о котором стоит помнить: location.replace() заменяет текущий документ, удаляя его из истории и делая его недоступным с помощью кнопки «Назад » в браузере.

window.location.href = "http://www.example.com";

Также вы можете зайти на эту страницу, чтобы подробнее узнать, как работает window.location .

Переадресация JavaScript: перенаправление при загрузке

Чтобы перенаправить пользователя на другой веб-сайт сразу же после открытия вашего сайта, можно использовать следующий код вверху вашей страницы, внутри элемента . Или, если вы используете отдельный .js файл , поместите следующий код в этот файл и не забудьте сослаться на него в заголовке вашей страницы:

window.location.href = "http://www.example.com";

Просто замените URL-адрес из примера на тот адрес, куда вы хотите перенаправлять. Следует отметить, что при этом виде переадресации, посетители вообще не увидят вашу веб-страницу и будут моментально перенаправлены на целевой адрес.

Переадресация JavaScript: перенаправление после определенного периода времени

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

setTimeout(function() { window.location.href = "http://www.example.com"; }, 3000);

Функция JavaScript location href , приведенная выше, перенаправит пользователя со страницы через 3 секунды после полной загрузки. Вы можете изменить значение 3000 (3 x 1000 в миллисекундах ) на свое усмотрение.

Переадресация JavaScript: перенаправление со страницы после события или действия пользователя

Иногда нужно отправить пользователя на другую страницу после определенного события или совершенного действия. В таких случаях можно использовать проверку условия или закрепить за элементом событие для выполнения переадресации. Рассмотрим два следующих примера:

// Проверяем, верно ли условие, и затем перенаправляем. if (...) { window.location.href = "http://www.example.com"; }

Приведенный выше код JavaScript document location href выполнит перенаправление, если условие верно:

// событие onclick присвоено элементу #button. document.getElementById("button").onclick = function() { window.location.href = "http://www.example.com"; };

Приведенный выше код выполнит перенаправление, когда пользователь нажмет на элемент #button .

Так работает переадресация в JavaScript . Надеемся, эти примеры помогут вам в организации переадресации веб-страниц.

Перевод статьи «JavaScript Redirect: How to Redirect a Web Page with JavaScript » был подготовлен дружной командой проекта .

Хорошо Плохо

    В этой статье я расскажу, как можно перенаправить пользователя с одной веб-страницы на другую с помощью JavaScript. А также приведу несколько простых примеров JS…

  • классификация объектов JavaScript;
  • объекты браузера;
  • объект location ;
  • свойства и методы объекта location ;
  • объект history ;
  • свойства и методы объекта history ;
  • объект navigator ;
  • свойства объекта navigator ;
  • отступление: определение браузера;
  • методы объекта navigator ;
  • объект screen ;
  • свойства объекта screen .
«Словарный запас» JavaScript

До сих пор мы изучали ЯДРО JavaScript, чтобы понять, КАК он работает. В третьей части мы в первую очередь займёмся его окружением — тем, С ЧЕМ работает JavaScript. Образно говоря, изучив основы «грамматики», мы начинаем наращивать «словарный запас».

Конечно, чтобы сделать работающие скрипты, мы «выглядывали наружу» из ядра, но наши «вылазки» не носили систематического характера. Теперь пора привести в систему те объекты, с которыми мы невольно сталкивались.

Объекты, с которыми работает JavaScript, можно условно разделить на 2 категории:

1. Встроенные объекты (собственно объекты ядра ), с которыми мы уже познакомились достаточно подробно.

2. Клиентские объекты , «родителем» которых является объект window . Их тоже можно условно разделить на 2 категории:

а). Объекты браузера . К ним относятся элементы интерфейса браузера — окно, показывающее web-страницу, панели инструментов, строка состояния, полосы прокрутки, а такде информация о типе и версии браузера.

б). Объекты HTML-документа (или XML-документа) — все те элементы, которые указаны в коде web-страницы.

Таинственный невидимый объект Global — прототип всех объектов JavaScript.

Левая ветка — ядро, объект Object — прародитель всех встроенных объектов (объектов ядра).

Правая ветка — клиентские объекты , с которыми работает JavaScript. Мы уже немного прикоснулись к их пращуру — объекту window — во второй части (уроки , , , ).

Объекты web-страницы, заключённые в объект document , представляют собой иерархию DOM — Document Object Model (объектная модель документа). Изучению этой огромной, необъятной модели и будет посвящено большинство уроков третьей части.

Но начнём с чего попроще. А именно — с объектов браузера.

Объекты браузера

Существует путаница в классификации клиентских объектов. Часто можно встретить в одном перечне объекты window , location , history , document , navigator . (Объект screen часто вообще не упоминается в перечнях.) Это не совсем точно. Объекты location , history , document и navigator (а также screen ) являются потомками (свойствами) window . В свою очередь, document имеет так много потомков (свойств), что его нужно рассматривать отдельно и подробно. А более непритязательные объекты — location , history , navigator и screen — целесообразно рассмотреть в одной связке, условно назвав её «объекты браузера» .

Итак, приступим к изучению этих объектов.

Примечание

У объекта document также есть свойства (объекты) location и history . Прошу это сразу запомнить и постараться не путать «однофамильцев».

Объект location

Свойства объекта описывают и хранят местонахождение текущего документа — например, адрес URL.

При управлении объектом location существует возможность изменять адрес URL документа. Объект location связан с текущим объектом window — окном, в которое загружен документ.

Синтаксис

[переменная_окна.]location .свойство;

переменная_окна — необязательная переменная, задающая окно, к которому обращается объект. Если переменная опущена, подразумевается свойство текущего окна.

свойство — свойство объекта location , к которому обращена инструкция.

Внимание!

Свойство location объекта window легко перепутать со свойством location объекта document (значение document.location изменить нельзя, тогда как window.location — можно. При загрузке страницы значение document.location автоманически присваивается объекту window.location .

Обращение к фрейму

Можно также изменить содержимое фрейма во фреймосодержащем документе при помощи свойства parent — синонима объекта window , обозначающего окно верхнего уровня, если окон несколько.

Синтаксис

parent .frames [n].location = "адрес_URL" ;

n — число, указывающее номер запрашиваемого фрейма в коллекции frames .

"адрес_URL" — URL документа, который инструкция загрузит в этот фрейм.

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

href

Полный адрес URL текущего документа, например:

location .href =

Свойство href является свойством объекта location по умолчанию. То есть отсутствие свойства при указании объекта location равносильно определению location.href . Например, следующие две инструкции эквивалентны и устанавливают одно и то же значение:

location = "http://myhost.ru/aboutme.html" location .href = "http://myhost.ru/aboutme.html"

hash

Часть URL после символа # , которая соответствует местоположению якоря в документе (если таковой имеется).

Символ # не включается в имя свойства при его установке.

location .href = http://myhost.ru/aboutme.html#ancor1" location .hash = "ancor1"

pathname

Часть адреса URL, описывающая каталог, в котором находится документ, включая начальный символ косой черты:

location .href = "http://myhost.ru/images/pict1.jpg" location .pathname = "/images/pict1.jpg"

protocol

Префикс адреса URL, описывающий протокол обмена. Иными словами, компонент URL до первого двоеточия, включая его. Возможные значения: "http:" , "ftp:" , "mailto:" и "file:" .

host

Часть адреса текущего документа, включающая имя хоста и порта сервера (если определён) через двоеточие, например:

location .host = "myhost.ru:80"

Что такое порт?

hostname

Первая половина свойства host (без порта):

location .hostname = "myhost.ru"

port

Вторая половина свойства host (только порт):

location .port = "80" Примеры свойств

С помощью свойств объекта location можно манипулировать разными участками полного адреса URL. Полный адрес - то есть location.href (или просто location) складывается из следующих «кубиков» (слэши после протокола необходимо доьавить вручную):

location.protocol + "//" + location.hostname + location.pathname Проверим данную страницу:

Document.write (location .href)

Примечание

Если страница находится у вас на компьютере, то после протокола (file:) появятся не два, а три слэша:

file:///F:/site/!my2008/lsn_js31.html

Третий слэш «закрывает» пустую строку, которая появляется вместо свойства hostname. В браузере Opera hostname будет определяться как localhost:

Document.write (location .protocol) document.write (location .hostname)

Примечание

Если страница находится у вас на компьютере, то свойство возвратит пустую строку (Opera выдаст localhost).

Document.write (location .pathname)

Примечание

Если страница находится у вас на компьютере, то свойство возвратит полный путь после протокола file://. При этом в IE слэши после обозначения диска будут обратными:

/F:\site\!my2008\lsn_js31.html

В других браузерах - прямыми:

/F:/site/!my2008/lsn_js31.html

Document.write (location .protocol + "//" + location .hostname + location .pathname)

Примечание

Если страница находится у вас на компьютере, то в IE слэши после обозначения диска будут обратными:

file:///F:\site\!my2008\lsn_js31.html

Браузер Opera добавит в качестве хоста localhost:

file://localhost/F:/site/!my2008/lsn_js31.html

Итак, всё вернулось на круги своя.

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

reload()

Синтаксис

location .reload ([проверка])

проверка — дополнительное Булево значение, по умолчанию — true .

Выполняет жесткую перезагрузку текущего документа окна (определённого свойством location.href ). Собственно, это же делает кнопка браузера «обновить» («refresh» ).

По умолчанию (без аргумента) или с аргументом true метод заставляет браузер проверить время последнего изменения документа и загрузить его либо из кэша(если не был изменён), либо с сервера (соответствует кнопке «обновить» ).

Если в качестве аргумента указано false , то браузер перезагрузит текущий документ с сервера без какой-либо предварительной проверки. Это соответствует нажатию на кнопке «обновить» при удержанной кнопке Shif t (Shift+Refresh )или Ctrl+F5 в Internet Explorer.

replace()

Синтаксис

location .replace ("URL" )

URL — строка содержащая полный или относительный URL документа, который будет загружен в текущее окно или фрейм.

Загружает новый документ в текущее окно, не занося предыдущую страницу в список history (об объекте history — чуть ниже). То есть при нажатии кнопки браузера «назад» («back» ) пользователь не сможет вернуться на предыдущую страницу.

Это полезно применять при переадресации сайта.

Предположим, сайт переехал, но постоянные пользоыватели помнят прежний адрес. Пока они не привыкли к новому, на старом адресе можно поместить пустую страницу, в которой будет скрипт переадресации.

Допустим, мы сделали это через свойство href :

location.href = "новый_адрес_страницы"

Скрипт приведёт нас на нужную страницу, но если нам зачем-либо понадобится нажать кнопку «назад» мы будем снова попадать на страницу переадресации, которая вновь пошлёт нас по указанному адресу («а приехал я назад, а приехал в Ленинград»), то есть кнопка «назад» окажется «зацикленной», и последняя страница станет тем самым «отцепленным вагоном» Маршака.

Но можно сделать грамотную переадресацию через метод replace() :

location.replace("новый_адрес_страницы" )

Преимущество этого метода в том, что промежуточная страница не записывается в массив history , и кнопка «назад» корректно приведёт нас на страницу, на которой мы были до этого.

Объект history

Пока мы сидим в интернете и переходим со страницы на страницу (то есть, научно говоря, выполняем «сессию браузера»), браузер ведёт журнал, содержащий список адресов страниц (URL), которые мы посетили. Эти адреса записываются в массив, который используется браузером при нажатии кнопок «Назад» («Back») и «Вперёд» («Forward»). Массив содержится в объекте history . В многооконных браузерах каждое окно имеет собственный объект history .

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

current

URL текущего окна в массиве history . Появляется при загрузке первой страницы. Обновляется при загрузке каждой следующей страницы в то же окно (вкладку).

next

URL следующего окна в массиве history . Появляется или обновляется после того, как мы нажали кнопку «Назад» («Back» ).

previous

URL предыдущего окна в массиве history . Появляется или обновляется при каждом переходе на новую страницу.

length

Число элементов в массиве просмотренных страниц (размерность массива history ).

Примечание

В браузерах IE и Opera начальное значение равно 0 (то есть свойство возвращает не размерность массива, а номер текущего элемента), в браузерах Mozilla, Firefox и Google Chrome - это 1 (то есть именно размерность массива).

Для проверки можете поместить на страницу такой скрипт,

document.write (history.length)

а потом открыть её в разных браузерах.

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

back()

Синтаксис

History.back()

Перейти на предыдущую страницу (эмуляция кнопки «Назад»). Если предыдущей страницы нет, то вызов метода ничего не даст.

forward()

Синтаксис

History.forward()

Перейти на следующую страницу (эмуляция кнопки «Вперёд»). Вызов метода на последней странице ничего не даст.

go()

Синтаксис

History.go(шаг) /* или */ history.go("URL")

Аргументы

шаг - целое число, показывающее, на сколько шагов вперёд/назад надо переместиться. Значение 0 перезагружет текущую страницу; значение -1 эквивалентно back() ; значение 1 эквивалентно forward() . Если шаг лежит за границами истории посещений (например -1 для первой страницы), то метод ничего не не даст.

URL - адрес документа, сохранённого в списке хронологии.

Перемещает на определённую позицию в массиве history или на адрес страницы, содержащейся в массиве.

Объект navigator

Объект navigator представляет ряд свойств браузера.

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

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

Для «общего развития» привожу все свойства этого объекта. Хотя, как вы увидите, некоторые из них на сегодняшний день достаточно бессмысленны. Но языки программирования пишутся «на вырост», и со временем «балластовые» свойства могут оказаться актуальными.

Свойства перечислены по алфавиту, а не по значимости.

appCodeName

Показывает кодовое имя браузера. У всех браузеров (IE, Netscape, Mozilla, Firefox, Opera, Google Chrome и т.д.) кодовое имя - Mozilla. Так что это свойство пока практического значения не имеет.

appMinorVersion

Всем программам традиционно присваиваются «большие» (major) и «малые» (minor) номера версии. «Большая» версия обозначает принципиально новый вариант программы. «Малая» - улучшенный и исправленный вариант текущей версии программы. Обычно «малая» версия пишется после точки вслед за «большой». Например, 4.03.

По идее свойство appMinorVersion должно возвращать номер «малой» версии браузера (тот, что после точки). Однако в большинстве браузеров возвращается undefined , т.е. «не определено». Так что свойство опять же чисто номинальное.

appName

Показывает имя браузера.

Microsoft Internet Explorer

Netscape, Mozilla, Firefox, Google Chrome

* в браузере Opera есть «обманная» настройка, которая позволяет ему «мимикрировать» под другие имена. Зачем - непонятно.

Свойство appName позволяет в общих чертах определить тип браузера. На заре интернета этого вполне хватало. Однако сейчас для точного и корректного определения стоит пользоваться другими приёмами (см. ниже).

appVersion

Показывает полный номер версии браузера и - в скобках - платформу операционной системы и заданный по умолчанию язык - часть информации, возвращаемой свойством userAgent (см. ниже). IE и Google Chrome показывают более полную информацию userAgent .

В Firefox и Google Chrome возникает путаница с номером версии. Так, и Firefox 3, и Google Chrome показывают номер версии 5.0.

Почему так?

С выходом IE и Netscape 4-х версий произошла «бархатная революция» в «сближении и взаимопонимании» этих браузеров. Поэтому часто в ветвлениях кода для разных браузеров определение версии 4 используется как «индикатор соответствия». Это делается извлечением номера «большой» версии из свойства appVersion с помощью метода parseInt() , например:

if (parseInt(navigator.appVersion) >= 4 ) { // код для браузеров 4 версии и выше } else { // код для старых браузеров }

Отсюда понятно, что «завышенный» номер версии используется в Firefox и Google Chrome для «подстраховки».

Итак, мы выяснили, что при всей громоздкости и «глючности» это свойство может найти полезное применение в кроссбраузерных кодах.

Значения свойства appVersion в некоторых браузерах:

4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)

Firefox 3.63

5.0 (Windows; ru) // скромненько и со вкусом

Google Chrome *

5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16

* почему-то русская версия браузера всё равно возвращает en-US.

Opera 8.54

8.54 (Windows NT 5.1; U; ru)

Ваш браузер

Что означает абракадабра, похожая на шпионский шифр, рассмотрим в свойстве userAgent .

browserLanguage

Если вы обратили внимание, в IE свойство appVersion возвращает что угодно, кроме языка.

Свойство browserLanguage - язык браузера по умолчанию - специфическое свойство IE (его понимает также Opera 7 и выше). Остальные браузеры возвращают undefined .

cookieEnabled

Свойство определяет, позволяет ли данный браузер читать и записывать данные cookie. Оно используется в скриптах, работающих с «куками», например:

if (cookieEnabled) { setCookieData(data)}

Возвращает булево значение (если да, то true ).

cpuClass

Ещё одна «примочка» IE. Возвращает информацию о CPU клиентского компьютера (кто не знает, CPU - это процессор). Процессоры Intel возвращают x86 , PowerPC Macintosh - PPC . Ни тебе скорости, ни номера модели. И зачем, однако?..

javaEnabled

Булево значение. Проверяет, включён ли Java в установках браузера (если да, то true ).

language

То же, что browserLanguage , но для браузеров с appName Netscape. Opera понимает оба свойства.

onLine

Булево значение. Проверяет, установлен ли браузер для просмотра online или offline (если да, то true ). Opera не поддерживает.

platform

Возвращает название операционной системы или аппаратной платформы браузера. Для Windows 95/NT, значение - Win32; для Macintosh, на PowerPC CPU, значение - MacPPC. Использование этого свойства для определения базовых средств клиента в условном выражении могут помочь оптимизировать вывод страницы для каждого устройства. Например:

userAgent

При посещении сайта браузер обычно посылает серверу информацию о себе. Это текстовая строка с информацией о названии и версии приложения, операционной системе компьютера и языка. Эту информацию и содержит свойство userAgent .

На многих комапьютерах установлены пвкеты.NET Framework - технологии, поставляемой Microsoft. Свойство userAgent браузера IE указывает также версии этих пакетов. CLR (Common Language Runtim) - «общеязыковая исполняющая среда» - компонент пакета Microsoft .NET Framework, выполняющий программы, написанные на.NET-совместимых языках программирования.

Поскольку в браузерах «согласья нет», многие сайты для работы с «лебедем, раком и щукой» используют userAgent для определения браузера и в зависимости от получаемого значения посылают соответствующее содержимое веб-страниц. Из-за этого многие браузеры стали «прятать» или «подделывать» userAgent . Отсюда использование браузером IE, а затем и Google Chrome строки userAgent , начинающейся с «Mozilla/ ». Отсюда и «глючная» опция браузера Opera, позволяющая пользователю выбирать для браузера поддельный «псевдоним».

Из-за этой путаницы для определения браузера лучше использовать не свойство целиком, а его отдельные наиболее характерные элементы, находя их методом indexOf() . Например, проверить наличие желаемой строки можно так:

if (navigator.userAgent.indexOf ("MSIE" ) != -1 ) var isIE = true

Кроме популярных «лебедя, рака и щуки», могут встретиться малопопулярные «медвели» и «крокодилы» с каким-нибудь совсем «левым» userAgent . И для них опренделение через userAgent может не сработать вообще. Поэтому определение типа браузера через userAgent может оказаться таким же некорректным, как и через appName .

После перечисления оставшихся свойств я приведу способ наиболее корректной проверки (хотя и она не даёт стопроцентной гарантии).

userLanguage

Значение по умолчанию языка браузера, основанное на установке операционной системы user profile (если таковая имеется). По умолчанию соответствует свойству browserLanguage . Поддерживается только браузерами IE и Opera.

userProfile

Объект, который позволяет непосредственно по запросу сценария обратиться к личной информации, сохраненной в параметрах пользователя (для Win32 версий IE 4+).

В данном обзорном разделе мы не будем рассматривать громоздкий, но малоупотребительный объект userProfile с его многочисленными методами, тем более, что он существует в IE 6 и только в IE 6 (это, кстати, может пригодиться для определения версии браузера).

vendor

Возвращает название распространителя браузера. Не поддерживается IE и Opera. Firefox обычно выдаёт пустую строку. Значение для Google Chrome - «Google Inc. ».

На сегодняшний день может использоваться как определитель браузера Google Chrome.

Отступление: способы определения браузера

Определяя тип браузера, логичнее идти не от «вывески», а от его внутренних свойств. Хотя и «вывеска» может сыграть свою подсобную роль.

Самый элементарный способ

Чуть забегая вперёд, обратимся к свойствам документа (подробнее см. в следующем уроке). Принципиальное различие IE и браузеров семейства Netscape в том, что первый поддерживает коллекцию document.all , а последние - нет.

if (!document.all) { /* код для семейства Netscape (восклицательный знак означает отрицание) */ }

Здесь мы определили вариант для браузеров семейства Netscape. В «противный случай» попадают браузеры, поддерживающие document.all : IE, Opera и, возможно, какие-то ещё малопопулярные. Для их разделения воспользуемся «вывеской» IE.

Часто этого способа бывает достаточно.

Ещё один элементарный способ

Браузер IE поддерживает специальный синтаксис, который интерпретирует код только в IE. Этот код помещается в тэг комментариев, поэтому остальные браузеры видят просто комментарий и игнорируют его.

В дополнение к этому существует тэг , который IE интерпретирует как комментарий (и, соответственно, игнорирует его содержимое), а остальные браузеры просто читают его содержимое, как будто самого этого тэга нет.

Из этого можно соорудить следующую конструкцию:

Код для браузера IE // Код для других браузеров

Ключевые слова для IE:

IE - любая версия браузера Internet Explorer;

IE 6 - Internet Explorer 6;

IE 7 - Internet Explorer 7;

IE 8 - Internet Explorer 8;

IE 9 - Internet Explorer 9;

lt - номер версии браузера меньше указанной;

gt - номер версии больше указанной;

lte - номер версии меньше или равен указанной;

gte - номер версии больше или равен указанной.

Например, означает любую версию IE, начиная с IE 6.

Более хитрые способы (обзор)

Если поискать, то у каждого браузера можно найти какие-нибудь «фишки», присущие ему одному.

Как мы уже знаем, Opera умеет прикидываться другими браузерами (в 10-й версии это безобразие прекратилось). Но при этом (начиная с 5-й версии) поддерживает объект JavaScript window.opera . Вот она и спалилась. Этот же объект может показать и версию:

Window.opera.version()

Допустим:

if (window.opera != null ) { if (window.opera.version() >= 8 ) { // Код для Opera 8 и новее } else { // Код для Opera старше 8 } } else { // Код для других браузеров }

Google Chrome имеет уникальный объект window.chrome . Версию определить сложнее, поскольку parseFloat(navigator.appVersion) выдаст «обманку» 5.0. Пока не будем лезть в дебри регулярных выражений (а это делается именно с их помощью).

Уникальные объекты Firefox - window.sidebar и window.globalStorage . С версией те же проблемы, что и у Google Chrome.

У Safari не обнаружилось уникальных объектов, но у него нет объекта window.external . Этого объекта лишена и Opera. Поэтому ветка для определения Safari может выглядеть так:

if ((!window.external)&&(!window.opera)) { // Код для Safari }

IE поддерживает объекты window.all и window.ActiveXObject .

В IE 6 и только в IE 6, как мы знаем, существует navigator.userProfile . В IE 8 появились объекты window.Storage и window.Event . В IE 7, соответственно, нет ни userProfile , ни Storage , ни Event .

Теперь, когда даны условия задачи, можете сами построить функцию для определения разных браузеров. В 4 части наших уроков с помощью регулярных выражений сделаем более подробную функцию для определения браузеров с версиями. Возможно, пока я до этого дойлу, появится уже что-то новенькое.

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

preference()

Через маркированные скрипты в Navigator 4 и выше можно обращаться к пользовательским параметрам настроек браузера. Они включают такие детали, как «разрешил ли пользователь загружать изображения» или «позволяются ли таблицы стилей». Большинство этих параметров настройки предназначено для скриптов, используемых сетевыми администраторами, чтобы устанавливать и управлять пользовательскими параметрами настройки Navigator.

Аргументы

name - название настройки как строка, типа general.always_load_images.

value - дополнительное значение, чтобы установить названное предпочтение.

taintEnabled()

Возвращает, включен ли в браузере «data tainting». Этот механизм защиты никогда не был полностью реализован в Navigator, но проверяющий это метод включён в более новые версии Navigator для обратной совместимости. IE 4+ также включает его для совместимости, хотя всегда возвращает false . Возвращает булево значение: true|false .

Объект screen

Объект screen определяет свойства экрана, на котором показан браузер. На их значения влияют многие параметры настройки панели управления.

Методов объект screen не имеет.

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

Высота и ширина видимой области монитора пользователя в пикселях. Не включает панель задач в 24 пикселя (Windows) или системную строку меню в 20 пикселей (Macintosh). Чтобы использовать эти значения при создании развёрнутого окна, необходимо корректировать верхнюю левую позицию окна.

Пример (окно на полширины и всю высоту в левой верхней точке экрана, панель задач не заслоняется):

window.open ("" , "" , "height=" + screen.availHeight + ", width=" + screen.availWidth/2 + ", top=0, left=0" );

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


Рис. 4.2.

Свойство location объекта window само является объектом класса Location . Класс Location , в свою очередь, является подклассом класса URL , к которому относятся также объекты классов Area и Link . Объекты Location наследуют все свойства объектов URL , что позволяет получить доступ к любой части схемы URL . Подробнее о классе объектов URL мы расскажем в "Программируем гипертекстовые переходы" .

В целях совместимости с прежними версиями JavaScript, в языке поддерживается также свойство window.document. location , которое в настоящее время полностью дублирует свойство window. location со всеми его свойствами и методами. Рассмотрим теперь свойства и методы объекта window. location (событий, связанных с этим объектом, нет).

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

Их проще продемонстрировать на примере. Предположим, что браузер отображает страницу, расположенную по адресу:

Тогда свойства объекта location примут следующие значения:

window.location.href = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark" window.location.protocol = "http:" window.location.hostname = "www.site.ru" window.location.port = 80 window.location.host = "www.site.ru:80" window.location.pathname = "dir/page.cgi" window.location.search = "?product=phone&id=3" window.location.hash = "#mark"

Как уже говорилось в предыдущих лекциях, к свойствам объектов можно обращаться как с помощью точечной нотации (как выше), так и с помощью скобочной нотации , например: window. location [" host "] .

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

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

window.location.reload(true);

Метод reload () полностью моделирует поведение браузера при нажатии на кнопку Reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true , то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Такое поведение соответствует простому нажатию кнопки Reload браузера (клавиши F5 в Internet Explorer ). Если в качестве аргумента указать false , то браузер перезагрузит текущий документ с сервера, несмотря ни на что. Такое поведение соответствует одновременному нажатию клавиши Shift и кнопки браузера Reload (или Ctrl+F5 в Internet Explorer ).

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

window.location.href="http://www.newsite.ru/"; window.location.replace("http://www.newsite.ru/");

Разница между ними - в отображении этого действия в истории посещений страниц window. history . В первом случае в историю посещений добавится новый элемент, содержащий адрес " http://www.newsite.ru/ ", так что при желании можно будет нажать кнопку Back на панели браузера, чтобы вернуться к прежней странице. Во втором случае новый адрес " http://www.newsite.ru/ " заместит прежний в истории посещений, и вернуться к прежней странице нажатием кнопки Back уже будет невозможно.

История посещений (history)

История посещений страниц World Wide Web позволяет пользователю вернуться к странице, которую он просматривал ранее в данном окне браузера. История посещений в JavaScript трансформируется в объект window. history . Этот объект указывает на массив URL-страниц, которые пользователь посещал и которые он может получить, выбрав из меню браузера режим Go. Методы объекта history позволяют загружать страницы, используя URL из этого массива.

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

Данный код отображает кнопку "Назад", нажав на которую, мы вернемся на предыдущую страницу. Аналогичным образом действует метод history . forward () , перенося нас на следующую посещенную страницу.

Существует также метод go() , имеющий целочисленный аргумент и позволяющий перескакивать на несколько шагов вперед или назад по истории посещений. Например, history .go(-3) перенесет нас на 3 шага назад в истории просмотра. При этом методы back() и forward () равносильны методу go() с аргументами -1 и 1 , соответственно. Вызов history .go(0) приведет к перезагрузке текущей страницы.

Тип браузера (navigator)

Часто возникает задача настройки страницы на конкретную программу просмотра (браузер). При этом возможны два варианта: определение типа браузера на стороне сервера, либо на стороне клиента. Для последнего варианта в арсенале объектов JavaScript существует объект window. navigator . Важнейшие из свойств этого объекта перечислены ниже.

Рассмотрим простой пример определения типа программы просмотра.