Window #erase#location href получить значение по php. Отношения между фреймами. Переадресация 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.

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

В этой статье мы покажем, как можно организовать перенаправление со страницы, используя 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…

Вы хотите создать собственный сайт на просторах Интернета? Причем желательно, чтобы он был красивым, удобным и «неглючным»? Казалось бы, чего проще: существует столько программ – конструкторов сайтов. Однако чтобы создать действительно профессиональный сайт, подобных утилит недостаточно. Вам потребуется знание языков программирования HTML и XHTML, а также каскадных таблиц стилей CSS. И в этом случае книга, которую вы держите в руках, – именно то, что вам необходимо. С ее помощью вы научитесь создавать красиво оформленные, быстрые и профессиональные сайты. С этой книгой ваша страничка никогда не останется незамеченной в Сети!

Книга: Разделы на этой странице:

Объект Location является частью объекта Window. Он содержит информацию об URL-адресе текущей страницы и его составляющих.

Использование объекта Location в сценарии JavaScript позволяет обновить текущую страницу или полностью поменять URL-адрес, то есть перейти на другую веб-страницу.

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

Href – полный URL-адрес текущей веб-страницы.

Hash – имя «якоря» в URL-адресе веб-страницы (значение атрибута name), если он есть.

Host – часть URL-адреса страницы, содержащая имя сервера в Интернете и номер порта.

Hostname – имя сервера в Сети, с которого загружена текущая веб-страница.

Pathname – путь к файлу на веб-сервере без имени сервера и порта.

Port – сообщает номер порта HTTP-сервера, через который идет обращение к веб-странице. Если порт не указан, возвращает номер 8 0 – стандартный порт, через который работает протокол HTTP.

Protocol – протокол передачи данных (HTTP, FTP и др.). Если протокол не указан, возвращает значение http:.

Search – строка параметров для серверных сценариев, начинается со знака?.

Команды host, hostname, port, search не работают, если просматривать страницу с жесткого диска компьютера. Результат может быть только в том случае, если веб-страница размещается на сервере в Интернете.

Внимание!

Поскольку объект Location является частью объекта Window, доступ к нему осуществляется именно через этот объект: window.location.property.

Рассмотрим использование свойств объекта Location на примере сценария из листинга 10.16.

Листинг 10.16. Свойство href объекта Location

URL текущего HTML-документа

document.write(location.href); //код JavaScript

// Конец маскировки сценария –>

Данный сценарий определяет полный URL-адрес текущего HTML-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).

Рис. 10.15. Путь к файлу со сценарием

Методы объекта Location позволяют перезагружать текущую веб-страницу или менять URL-адрес, загружать другую веб-страницу вместо предыдущей. При этом будет невозможен переход к предыдущей странице с помощью кнопки Назад в браузере пользователя. Возникает эффект, что страницы как бы подменяются друг другом.

Рассмотрим подробнее методы объекта Location.

Assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.

Reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).

Replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.

В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().

Листинг 10.17. Использование метода replace()

Метод replace()

function replaceDoc()

window.location.replace("http://www.yandex.ru") //код JavaScript

// Конец маскировки сценария –>

//кнопка

Свойство только для чтения 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)); } }; })();

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

Объект Window

Объект Window является центром прикладных интерфейсов клиентского JavaScript. Он представляет окно веб-браузера или фрейм, а сослаться на него можно с помощью идентификатора window . Объект Window определяет свойства, такие как location, которое ссылается на объект Location, определяющий URL текущего окна и т.п.

Кроме того, объект Window определяет методы, такие как alert(), который отображает диалог с сообщением, и setTimeout(), который регистрирует функцию для вызова через указанный промежуток времени.

Объект Window в клиентском JavaScript является глобальным объектом. Это означает, что объект Window находится на вершине цепочки областей видимости и что его свойства и методы фактически являются глобальными переменными и функциями. Объект Window имеет свойство window, которое всегда ссылается на сам объект. Это свойство можно использовать для ссылки на сам объект, но обычно в этом нет необходимости, если требуется просто сослаться на свойство глобального объекта окна.

Объект Window определяет также множество других важных свойств, методов и конструкторов, которое мы и рассмотрим ниже.

Таймеры

Функции setTimeout() и setInterval() позволяют зарегистрировать функцию, которая будет вызываться один или более раз через определенные интервалы времени. Это очень важные функции для клиентского JavaScript, и поэтому они были определены как методы объекта Window, несмотря на то что являются универсальными функциями, не выполняющими никаких действий с окном.

Метод setTimeout() объекта Window планирует запуск функции через определенное число миллисекунд. Метод setTimeout() возвращает значение, которое может быть передано методу clearTimeout() , чтобы отменить запланированный ранее запуск функции.

Метод setInterval() похож на setTimeout(), за исключением того, что он автоматически заново планирует повторное выполнение через указанное количество миллисекунд:

SetInterval(updateClock, 60000); // Вызывать updateClock() через каждые 60 сек

Подобно setTimeout(), метод setInterval() возвращает значение, которое может быть передано методу clearInterval() , чтобы отменить запланированный запуск функции.

В следующем примере определяется вспомогательная функция, которая ожидает указанный интервал времени, многократно вызывает указанную функцию и затем отменяет запланированные вызовы по истечении другого заданного интервала времени. Этот пример демонстрирует использование методов setTimeout(), setInterval() и clearInterval():

/* * Планирует вызов или вызовы функции f() в будущем. * Ожидает перед первым вызовом start миллисекунд, затем вызывает f() * каждые interval миллисекунд и останавливается через start+end миллисекунд. * Если аргумент interval указан, а аргумент end нет, повторяющиеся вызовы функции f * никогда не прекратятся. Если отсутствуют оба аргумента, interval и end, * тогда функция f будет вызвана только один раз, через start миллисекунд. * Если указан только аргумент f, функция будет вызвана немедленно, как если бы * в аргументе start было передано число 0. Обратите внимание, что вызов invoke() * не блокируется: она сразу же возвращает управление. */ function invoke(f, start, interval, end) { if (!start) start = 0; // По умолчанию через 0 мс if (arguments.length

По исторически сложившимся причинам в первом аргументе методам setTimeout() и setInterval() допускается передавать строку. В этом случае строка будет интерпретироваться (как с применением функции eval()) через указанный интервал времени. Спецификация HTML5 (и все браузеры, кроме IE) допускает передавать методам setTimeout() и setInterval() дополнительные аргументы после первых двух. Все эти дополнительные аргументы будут передаваться функции, вызов которой планируется этими методами. Однако если требуется сохранить совместимость с IE, эту возможность использовать не следует.

Если методу setTimeout() указать величину интервала 0 миллисекунд, указанная функция будет вызвана не сразу, а «как только такая возможность появится», т.е. как только завершат работу все обработчики событий.

Адрес документа и навигация по нему

Свойство location Location , представляющий текущий URL-адрес документа, отображаемого в окне и определяющий методы, инициирующие загрузку нового документа в окно.

Свойство location объекта Document также ссылается на объект Location:

Window.location === document.location; // всегда верно

Кроме того, объект Document имеет свойство URL, хранящее статическую строку с адресом URL документа. При перемещении по документу с использованием идентификаторов фрагментов (таких как «#table-of-contents») внутри документа объект Location будет обновляться, отражая факт перемещения, но свойство document.URL останется неизменным.

Анализ URL

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

Другие свойства этого объекта, такие как protocol , host , hostname , port , pathname , search и hash , определяют отдельные части URL-адреса. Они известны как свойства «декомпозиции URL» и также поддерживаются объектами Link (которые создаются элементами и в HTML-документах).

Свойства hash и search объекта Location представляют особый интерес. Свойство hash возвращает «идентификатор фрагмента» из адреса URL, если он имеется: символ решетки (#) со следующим за ним идентификатором. Свойство search содержит часть URL-адреса, следующую за вопросительным знаком, если таковая имеется, включая сам знак вопроса. Обычно эта часть URL-адреса является строкой запроса. В целом эта часть URL-адреса используется для передачи параметров и является средством встраивания аргументов в URL-адрес.

Хотя эти аргументы обычно предназначены для сценариев, выполняющихся на сервере, нет никаких причин, по которым они не могли бы также использоваться в страницах, содержащих JavaScript-код. В примере ниже приводится определение универсальной функции urlArgs(), позволяющей извлекать аргументы из свойства search URL-адреса. В примере используется глобальная функция decodeURIComponent(), имеющаяся в клиентском JavaScript:

/* * Эта функция выделяет в URL-адресе разделенные амперсандами * пары аргументов имя/значение из строки запроса. Сохраняет эти пары * в свойствах объекта и возвращает этот объект. Порядок использования: * * var args = urlArgs(); // Извлечь аргументы из URL * var q = args.q || ""; // Использовать аргумент, если определен, или значение по умолчанию * var n = args.n ? parseInt(args.n) : 10; */ function urlArgs() { var args = {}; // Создать пустой объект var query = location.search.substring(1); // Строка запроса без "?" var pairs = query.split("&"); // Разбить по амперсандам for(var i = 0; i

Загрузка нового документа

Метод assign() объекта Location заставляет окно загрузить и отобразить документ по указанному URL-адресу. Метод replace() выполняет похожую операцию, но перед открытием нового документа он удаляет текущий документ из списка посещавшихся страниц.

Когда сценарию просто требуется загрузить новый документ, часто предпочтительнее использовать метод replace(), а не assign(). В противном случае кнопка Back (Назад) браузера вернет оригинальный документ и тот же самый сценарий снова загрузит новый документ. Метод location.replace() можно было бы использовать для загрузки версии веб-страницы со статической разметкой HTML, если сценарий обнаружит, что браузер пользователя не обладает функциональными возможностями, необходимыми для отображения полноценной версии:

// Если браузер не поддерживает объект XMLHttpRequest, выполнить // переход к статической странице, которая не использует его if (!XMLHttpRequest) location.replace("static_page.html");

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

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

Location = "http://www.сайт";

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

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

Методы back() и forward() действуют подобно кнопкам Back (Назад) и Forward (Вперед) браузера: они заставляют браузер перемещаться на один шаг назад и вперед по истории просмотра данного окна. Третий метод, go() , принимает целочисленный аргумент и пропускает заданное число страниц, двигаясь вперед (если аргумент положительный) или назад (если аргумент отрицательный) в списке истории:

// Переход назад на 2 элемента, как если бы пользователь // дважды щелкнул на кнопке Back (Назад) history.go(-2);

Если окно содержит дочерние окна (такие как элементы ), истории посещений в дочерних окнах хронологически чередуются с историей посещений в главном окне. То есть вызов history.back() (например) в главном окне может вызвать переход назад, к ранее отображавшемуся документу, в одном из дочерних окон, оставив главное окно в текущем состоянии.

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

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

Один из приемов реализации такого поведения опирается на использование скрытого элемента , в котором сохраняется информация о состоянии и создаются записи в списке истории просмотра. Чтобы создать новую запись, в этот скрытый фрейм динамически записывается новый документ, с помощью методов open() и write() объекта Document. Документ должен включать всю информацию, необходимую для воссоздания соответствующего состояния приложения. Когда пользователь щелкнет на кнопке Back, содержимое скрытого фрейма изменится. До появления стандарта HTML5 не предусматривалось никаких событий, которые извещали бы об этом изменении, поэтому, чтобы определить момент щелчка на кнопке Back, приходилось использовать функцию setInterval() и с ее помощью 2-3 раза в секунду проверять наличие изменений в скрытом фрейме.

Однако на практике разработчики, когда требуется реализовать подобное управление историей просмотра, предпочитают использовать готовые решения. Многие фреймворки JavaScript включают такие решения. Например, для библиотеки jQuery существует расширение history. Существуют также автономные библиотеки управления историей. Например, одной из наиболее популярных является библиотека RSH (Really Simple History - действительно простое управление историей).

Информация о браузере и об экране

Иногда сценариям бывает необходимо получить информацию о веб-браузере, в котором они выполняются, или об экране, на котором отображается браузер. В этом разделе описываются свойства navigator и screen объекта Window. Эти свойства ссылаются, соответственно, на объекты Navigator и Screen, содержащие информацию, которая дает возможность подстроить поведение сценария под существующее окружение.

Объект Navigator

Свойство navigator объекта Window ссылается на объект Navigator, содержащий общую информацию о номере версии и о производителе браузера. Объект Navigator назван «в честь» браузера Netscape Navigator, но он также поддерживается во всех других браузерах. (Кроме того, IE поддерживает свойство clientInformation как нейтральный синоним для navigator. К сожалению, другие браузеры свойство с таким именем не поддерживают.)

В прошлом объект Navigator обычно использовался сценариями для определения типа браузера - Internet Explorer или Netscape. Однако такой подход к определению типа браузера сопряжен с определенными проблемами, т.к. требует постоянного обновления с появлением новых браузеров или новых версий существующих браузеров. Ныне более предпочтительным считается метод на основе проверки функциональных возможностей. Вместо того чтобы делать какие-либо предположения о браузерах и их возможностях, гораздо проще прямо проверить наличие требуемой функциональной возможности (например, метода или свойства).

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

navigator.appName

Название веб-браузера. В IE это строка «Microsoft Internet Explorer». В Firefox значением этого свойства является строка «Netscape». Для совместимости с существующими реализациями определения типа браузера значением этого свойства в других браузерах часто является строка «Netscape».

navigator.appVersion

Обычно значение этого свойства начинается с номера версии, за которым следует другая информация о версии браузера и его производителе. Обычно в начале строки указывается номер 4.0 или 5.0, свидетельствующий о совместимости с четвертым или пятым поколением браузеров. Формат строки в свойстве appVersion не определяется стандартом, поэтому невозможно организовать разбор этой строки способом, не зависящим от типа браузера.

navigator.userAgent

Строка, которую браузер посылает в http-заголовке USER-AGENT. Это свойство обычно содержит ту же информацию, что содержится в свойстве appVersion, а также может включать дополнительные сведения. Как и в случае со свойством appVersion, формат представления этой информации не стандартизован. Поскольку это свойство содержит больше информации, именно оно обычно используется для определения типа браузера.

navigator.platform

Строка, идентифицирующая операционную систему (и, возможно, аппаратную платформу), в которой работает браузер.

Сложность свойств объекта Navigator делает невозможной универсальную реализацию определения типа браузера. На раннем этапе развития Всемирной паутины было написано немало программного кода, зависящего от типа браузера, проверяющего свойства, такие как navigator.appName. Создавая новые браузеры, производители обнаружили, что для корректного отображения содержимого существующих веб-сайтов они должны устанавливать значение «Netscape» в свойстве appName. По тем же причинам потерял свою значимость номер в начале значения свойства appVersion, и в настоящее время реализация определения типа браузера должна опираться на строку в свойстве navigator.userAgent, имеющую более сложный формат, чем ранее.

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

// Определяет свойства browser.name и browser.version, позволяющие выяснить // тип клиента. Оба свойства, name и version, возвращают строки, и // в обоих случаях значения могут отличаться от фактических // названий браузеров и версий. Определяются следующие названия браузеров: // "webkit": Safari или Chrome; version содержит номер сборки WebKit // "opera": Opera; version содержит фактический номер версии браузера // "mozilla": Firefox или другие браузеры, основанные на механизме gecko; // version содержит номер версии Gecko // "msie": IE; version содержит фактический номер версии браузера var browser = (function() { var s = navigator.userAgent.toLowerCase(); var match = /(webkit)[ \/]([\w.]+)/.exec(s) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s) || /(msie) ([\w.]+)/.exec(s) || !/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) || ; return { name: match || "", version: match || "0" }; } ()); window.onload = function() { console.log("Версия браузера %s %s", browser.name, browser.version); };

В дополнение к свойствам с информацией о версии и производителе браузера, объект Navigator имеет еще несколько свойств и методов. В число стандартных и часто реализуемых нестандартных свойств входят:

navigator.onLine

Свойство navigator.onLine (если существует) определяет, подключен ли браузер к сети. Приложениям может потребоваться сохранять информацию о состоянии локально, если браузер не подключен к сети.

navigator.geolocation

Объект Geolocation, определяющий API для выяснения географического положения пользователя.

navigator.javaEnabled()

Нестандартный метод, который должен возвращать true, если браузер способен выполнять Java-апплеты.

navigator.cookiesEnabled()

Нестандартный метод, который должен возвращать true, если браузер способен сохранять cookies. Если браузер настроен на сохранение cookies только для определенных сайтов, этот метод может возвращать некорректное значение.

Объект Screen

Свойство screen объекта Window ссылается на объект Screen, предоставляющий информацию о размере экрана на стороне пользователя и доступном количестве цветов. Свойства width и height возвращают размер экрана в пикселах. Свойства availWidth и availHeight возвращают фактически доступный размер экрана; из них исключается пространство, требуемое для таких графических элементов, как панель задач. Свойство colorDepth возвращает количество битов на пиксел, определяющих цвет. Типичными значениями являются 16, 24 и 32.

Свойство window.screen и объект Screen, на который оно ссылается, являются нестандартными, но они реализованы практически во всех браузерах. Объект Screen можно использовать, чтобы определить, не выполняется ли веб-приложение на устройстве с маленьким экраном, таком как нетбук. При ограниченном пространстве экрана, например, можно было бы использовать шрифты меньшего размера и маленькие изображения.

Диалоговые окна

Объект Window обладает тремя методами для отображения простейших диалоговых окон. Метод alert() выводит сообщение и ожидает, пока пользователь закроет диалоговое окно. Метод confirm() предлагает пользователю щелкнуть на кнопке OK или Cancel (Отмена) и возвращает логическое значение. Метод prompt() выводит сообщение, ждет ввода строки пользователем и возвращает эту строку. Ниже демонстрируется пример использования всех трех методов:

Do { var name = prompt("Введите ваше имя"); // Вернет строку var correct = confirm("Вы ввели "" + name + "".\n" + // Вернет логич. знач. "Щелкните ОК, чтобы продолжить, или Отмена, чтобы повторить ввод."); } while(!correct) alert("Привет, " + name); // Выведет простое сообщение

Методы alert(), confirm() и prompt() чрезвычайно просты в использовании, но правила хорошего дизайна требуют, чтобы они применялись как можно реже. Диалоги, подобные этим, нечасто используются в Веб, и большинство пользователей сочтет диалоговые окна, выводимые этими методами, выпадающими из обычной практики. Единственный вариант, когда имеет смысл обращаться к этим методам - это отладка. JavaScript-программисты часто вставляют вызов метода alert() в программный код, пытаясь диагностировать возникшие проблемы.

Обратите внимание, что текст, отображаемый методами alert(), confirm() и prompt() в диалогах - это обычный неформатированный текст. Его можно форматировать только пробелами, переводами строк и различными знаками пунктуации.

Методы confirm() и prompt() являются блокирующими, т.е. они не возвращают управление, пока пользователь не закроет отображаемые ими диалоговые окна. Это значит, что, когда выводится одно из этих окон, программный код прекращает выполнение, и текущий загружаемый документ, если таковой существует, прекращает загружаться до тех пор, пока пользователь не отреагирует на запрос. В большинстве браузеров метод alert() также является блокирующим и ожидает от пользователя закрытия диалогового окна, но это не является обязательным требованием.

В дополнение к методам alert(), confirm() и prompt() в объекте Window имеется более сложный метод, showModalDialog() , отображающий модальный диалог, содержащий разметку HTML, и позволяющий передавать аргументы и получать возвращаемое значение.

Метод showModalDialog() выводит модальный диалог в отдельном окне браузера. Первым аргументом методу передается URL, определяющий HTML-содержимое диалога. Во втором аргументе может передаваться произвольное значение (допускается передавать массивы и объекты), которое будет доступно сценарию в диалоге, как значение свойства window.dialogArguments. Третий аргумент - нестандартный список пар имя/значение, разделенных точками с запятой, который, если поддерживается, может использоваться для настройки размеров и других атрибутов диалогового окна. Для определения размеров окна диалога можно использовать параметры «dialogwidth» и «dialogheight», а чтобы позволить пользователю изменять размеры окна, можно определить параметр «resizable=yes».

Окно, отображаемое эти методом, является модальным, и метод showModalDialog() не возвращает управление, пока окно не будет закрыто. После закрытия окна значение свойства window.returnValue становится возвращаемым значением метода. Обычно разметка HTML диалога должна включать кнопку OK, которая записывает желаемое значение в свойство returnValue и вызывает window.close().

В примере ниже приводится разметка HTML для использования с методом showModalDialog(). Комментарий в начале примера включает пример вызова showModalDialog(), а на рисунке показано диалоговое окно, созданное вызовом из примера. Обратите внимание, что большая часть текста, отображаемого в окне, передается методу showModalDialog() во втором аргументе, а не является жестко определенной частью разметки HTML:

Ok Отмена // Создает разметку HTML диалогового окна и отображает ее в элементе fieldset var args = dialogArguments; var text = "" + args + ""; for(var i = 1; i < args.length; i++) text += "" + args[i] + ":
"; document.getElementById("fields").innerHTML = text; // Закрывает диалоговое окно без установки возвращаемого значения function cancel() { window.close(); } // Читает значения полей ввода и устанавливает возвращаемое значение, // затем закрывает окно function ok() { window.returnValue = ; // Возвращаемый массив for(var i = 1; i < args.length; i++) // Значения элементов из полей ввода window.returnValue = document.getElementById("f" + i).value; window.close(); // Закрыть диалоговое окно. Это заставит showModalDialog() вернуть управление. }

Обработка ошибок

Свойство onerror объекта Window - это обработчик событий, который вызывается во всех случаях, когда необработанное исключение достигло вершины стека вызовов и когда браузер готов отобразить сообщение об ошибке в консоли JavaScript. Если присвоить этому свойству функцию, функция будет вызываться всякий раз, когда в окне будет возникать ошибка выполнения программного кода JavaScript: присваиваемая функция станет обработчиком ошибок для окна.

Исторически сложилось так, что обработчику события onerror объекта Window передается три строковых аргумента, а не единственный объект события, как в других обработчиках. (Другие объекты в клиентском JavaScript также имеют обработчики onerror, обрабатывающие различные ошибочные ситуации, но все они являются обычными обработчиками событий, которым передается единственный объект события.) Первый аргумент обработчика window.onerror - это сообщение, описывающее произошедшую ошибку. Второй аргумент - это строка, содержащая URL-адрес документа с JavaScript-кодом, приведшим к ошибке. Третий аргумент - это номер строки в документе, где произошла ошибка.

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

Обработчик onerror является пережитком первых лет развития JavaScript, когда в базовом языке отсутствовала инструкция try/catch обработки исключений. В современном программном коде этот обработчик используется редко.

Элементы документа как свойства окна

Если для именования элемента в HTML-документе используется атрибут id и если объект Window еще не имеет свойства, имя которого совпадает со значением этого атрибута, объект Window получает неперечислимое свойство с именем, соответствующим значению атрибута id, значением которого становится объект HTMLElement, представляющий этот элемент документа.

Как вы уже знаете, объект Window играет роль глобального объекта, находящегося на вершине цепочки областей видимости в клиентском JavaScript. Таким образом, вышесказанное означает, что атрибуты id в HTML-документах становятся глобальными переменными, доступными сценариям. Если, например, документ включает элемент , на него можно сослаться с помощью глобальной переменной ok.

Однако важно отметить, что этого не происходит, если объект Window уже имеет свойство с таким именем. Элементы с атрибутами id, имеющими значение «history», «location» или «navigator», например, не будут доступны через глобальные переменные, потому что эти имена уже используются. Аналогично, если HTML-документ включает элемент с атрибутом id, имеющим значение «x» и в сценарии объявляется и используется глобальная переменная x, явно объявленная переменная скроет неявную переменную, ссылающуюся на элемент.

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

Неявное использование идентификаторов элементов в качестве глобальных переменных - это пережиток истории развития веб-браузеров. Эта особенность необходима для сохранения обратной совместимости с существующими веб-страницами, но использовать ее сейчас не рекомендуется - в любой момент производители браузеров могут определить новое свойство в объекте Window, что нарушит работу любого программного кода, использующего неявно определяемое свойство с этим именем. Поиск элементов лучше выполнять явно, с помощью метода document.getElementById().

Открытие и закрытие окон

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

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

Второй аргумент open() - это строка с именем окна. Если окно с указанным именем уже существует (и сценарию разрешено просматривать содержимое этого окна), используется это существующее окно. Иначе создается новое окно и ему присваивается указанное имя. Если этот аргумент опущен, будет использовано специальное имя «_blank», т.е. будет открыто новое неименованное окно.

Обратите внимание, что сценарии не могут просто так указывать имена окон и не могут получать контроль над окнами, используемыми другими веб-приложениями: они могут указывать имена только тех существующих окон, которыми им «разрешено управлять» (термин взят из спецификации HTML5). Проще говоря, сценарий может указать имя существующего окна, только если это окно содержит документ, происходящий из того же источника, или если это окно было открыто самим сценарием (или рекурсивно открытым окном, которое открыло это окно).

Кроме того, если одно окно является фреймом, вложенным в другое окно, сценарии в любом из них получают возможность управлять другим окном. В этом случае можно использовать зарезервированные имена «_top» (для обозначения вмещающего окна верхнего уровня) и «_parent» (для обозначения ближайшего вмещающего окна).

Третий необязательный аргумент open() - это список параметров, определяющих размер и видимые элементы графического пользовательского интерфейса нового окна. Если опустить этот аргумент, окно получает размер по умолчанию и полный набор графических элементов: строку меню, строку состояния, панель инструментов и т.д. В браузерах, поддерживающих вкладки, это обычно приводит к созданию новой вкладки. Этот третий аргумент является нестандартным, и спецификация HTML5 требует, чтобы браузеры игнорировали его.

Указывать четвертый аргумент open() имеет смысл, только если второй аргумент определяет имя существующего окна. Этот аргумент - логическое значение, определяющее, должен ли URL-адрес, указанный в первом аргументе, заменить текущую запись в истории просмотра окна (true) или требуется создать новую запись (false). Если этот аргумент опущен, используется значение по умолчанию false.

Значение, возвращаемое методом open(), является объектом Window, представляющим вновь созданное окно. Этот объект позволяет сослаться в JavaScript-коде на новое окно так же, как исходный объект Window ссылается на окно, в котором выполняется сценарий:

Window.onload = function() { var w = window.open(); // Открыть новое пустое окно w..location = "http://сайт"; // Установить св-во location };

В окнах, созданных методом window.open(), свойство opener ссылается на объект Window сценария, открывшего его. В других случаях свойство opener получает значение null:

W.opener !== null; // Верно для любого окна w, созданного методом open() w.open().opener === w; // Верно для любого окна

Метод Window.open() часто используется рекламодателями для создания «всплывающих окон» с рекламой, когда пользователь путешествует по Всемирной паутине. Такие всплывающие окна могут раздражать пользователя, поэтому большинство веб-браузеров реализуют механизм блокирования всплывающих окон. Обычно вызов метода open() преуспевает, только если он производится в ответ на действия пользователя, такие как щелчок мышью на кнопке или на ссылке. Попытка открыть всплывающее окно, которая производится, когда браузер просто загружает (или выгружает) страницу, как в приведенном примере, обычно оканчивается неудачей.

Новое окно открывается при помощи метода open() и закрывается при помощи метода close() . Если объект Window был создан сценарием, то этот же сценарий сможет закрыть его следующей инструкцией:

Отношения между фреймами

Мы уже видели, что метод open() объекта Window возвращает новый объект Window, свойство opener которого ссылается на первоначальное окно. Таким образом, два окна могут ссылаться друг на друга, и каждое из них может читать свойства и вызывать методы другого. То же самое возможно для фреймов. Сценарий, выполняющийся в окне или фрейме, может ссылаться на объемлющее или вложенное окно или фрейм при помощи свойств, описываемых ниже.

Как вы уже знаете, сценарий в любом окне или фрейме может сослаться на собственное окно или фрейм с помощью свойства window или self. Фрейм может сослаться на объект Window вмещающего окна или фрейма с помощью свойства parent .

Если фрейм находится внутри другого фрейма, содержащегося в окне верхнего уровня, то он может сослаться на окно верхнего уровня так: parent.parent. Однако в качестве универсального сокращения имеется свойство top : независимо от глубины вложенности фрейма его свойство top ссылается на содержащее его окно самого верхнего уровня.