Как записывается адрес в строку состояния

Объект 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(), за исключением того, что он автоматически заново планирует повторное выполнение через указанное количество миллисекунд:

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

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

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

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

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

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

Свойство 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 (которые создаются элементами <a> и <area> в HTML-документах).

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

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

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

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

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

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

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

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

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

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

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

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

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

Один из приемов реализации такого поведения опирается на использование скрытого элемента <iframe>, в котором сохраняется информация о состоянии и создаются записи в списке истории просмотра. Чтобы создать новую запись, в этот скрытый фрейм динамически записывается новый документ, с помощью методов 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 название браузера и номер версии:

В дополнение к свойствам с информацией о версии и производителе браузера, объект 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() выводит сообщение, ждет ввода строки пользователем и возвращает эту строку. Ниже демонстрируется пример использования всех трех методов:

Методы 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:

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

Свойство 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-документах становятся глобальными переменными, доступными сценариям. Если, например, документ включает элемент <button />, на него можно сослаться с помощью глобальной переменной 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.open(), свойство opener ссылается на объект Window сценария, открывшего его. В других случаях свойство opener получает значение null:

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

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

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

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

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

Строка состояния

Составленные Вами программы на JavaScript могут выполнять запись в строку состояния — прямоугольник в нижней части окна Вашего браузера. Все, что Вам необходимо для этого сделать — всего лишь записать нужную строку в window.status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать.

function statbar(txt) <­
window.status = txt;
>

Итак, мы создаем форму с двумя кнопками. Обе эти кнопки вызывают функцию statbar(). Вызов от клавиши Писать! выглядит следующим образом:

statbar(‘Привет! Это окно состояния!’);

В скобках мы написали строку: ‘Привет! Это окно состояния!’ Это как раз и будет текст, передаваемый функции statbar(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:

function statbar(txt) <­
window.status = txt;
>

В заголовке функции в скобках мы поместили слово txt. Это означает, что строка, которую мы передали этой функции, помещается в переменную txt. Передача функциям переменных — прием, часто применяемый для придания функциям большей гибкости. Вы можете передать функции несколько таких аргументов — необходимо лишь отделить их друг от друга запятыми. Строка txt заносится в строку состояния посредством команды window.status = txt. Соответственно, удаление текста из строки состояния выполняется как запись в window.status пустой строки.

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

Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой. Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что браузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад — то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.

в JavaScript 1.0 процедура OnMouseOut еще не была представлена. И если Вы пользуетесь Netscape Navigator 2.x, то возможно на различных платформах Вы можете получить различные результаты. Например, на платформах Unix текст исчезает даже несмостря на то, что браузер не знает о существовании процедуры onMouseOut. В Windows текст не исчезает. И если Вы хотите, чтобы ваш скрипт был совместим с Netscape 2.x для Windows, то можете, к примеру, написать функцию, которая записывает текст в окно состояния, а потом стирает его через некоторый промежуток времени. Программируется это с помощью таймера timeout. Подробнее работу с таймерами мы рассмотрим в одном из следующих параграфов.

В этом скрипте Вы можете видеть еще одну вещь — в некоторых случаях Вам понадобится печатать символы кавычек. Например, мы хотим напечатать текст Don’t click me — однако поскольку мы передаем эту строку в процедуру обработки события onMouseOver, то мы используем для этого одинарные кавычки. Между тем, как слово Don’t тоже содержит символ одинарной кавычки! И в результате если Вы просто впишете »Don’t …’,браузер запутается в этих символах ‘. Чтобы разрешить эту проблему, Вам достаточно лишь поставить обратный слэш перед символом кавычки — это означает, что данный символ предназначен именно для печати. (То же самое Вы можете делать и с двойными кавычками — «).

Сообщения HTTP

HTTP сообщения — это обмен данными между сервером и клиентом. Есть два типа сообщений: запросы, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера, и ответы от сервера.

Сообщения HTTP состоят из текстовой информации в кодировке ASCII, записанной в несколько строк. В HTTP/1.1 и более ранних версиях они пересылались в качестве обычного текста. В HTTP/2 текстовое сообщение разделяется на фреймы, что позволяет выполнить оптимизацию и повысить производительность.

Веб разработчики не создают текстовые сообщения HTTP самостоятельно — это делает программа, браузер, прокси или веб-сервер. Они обеспечивают создание HTTP сообщений через конфигурационные файлы (для прокси и серверов), APIs (для браузеров) или другие интерфейсы.

Механизм бинарного фрагментирования в HTTP/2 разработан так, чтобы не потребовалось вносить изменения в имеющиеся APIs и конфигурационные файлы: он вполне прозрачен для пользователя.

HTTP запросы и ответы имеют близкую структуру. Они состоят из:

1. Стартовой строки, описывающей запрос, или статус (успех или сбой). Это всегда одна строка.
2. Произвольного набора HTTP заголовков, определяющих запрос или описывающих тело сообщения.
3. Пустой строки, указывающей, что вся мета информация отправлена.
4. Произвольного тела, содержащего пересылаемые с запросом данные (например, содержимое HTML-формы ) или отправляемый в ответ документ. Наличие тела и его размер определяется стартовой строкой и заголовками HTTP.

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

Запросы HTTP

Стартовая строка

HTTP запросы — это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трёх элементов:

1. Метод HTTP, глагол (например, GET , PUT или POST ) или существительное (например, HEAD или OPTIONS ), описывающие требуемое действие. Например, GET указывает, что нужно доставить некоторый ресурс, а POST означает отправку данных на сервер (для создания или модификации ресурса, или генерации возвращаемого документа).
2. Цель запроса, обычно URL, или абсолютный путь протокола, порт и домен обычно характеризуются контекстом запроса. Формат цели запроса зависит от используемого HTTP-метода. Это может быть
   • Абсолютный путь, за которым следует ‘?’ и строка запроса. Это самая распространённая форма, называемая исходной формой (origin form) . Используется с методами GET , POST , HEAD , и OPTIONS . POST / HTTP 1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0
   • Полный URL — абсолютная форма (absolute form) , обычно используется с GET при подключении к прокси. GET http://developer.mozilla.org/ru/docs/Web/HTTP/Messages HTTP/1.1
   • Компонента URL «authority», состоящая из имени домена и (необязательно) порта (предваряемого символом ‘:’ ), называется authority form. Используется только с методом CONNECT при установке туннеля HTTP. CONNECT developer.mozilla.org:80 HTTP/1.1
   • Форма звёздочки (asterisk form), просто «звёздочка» ( ‘*’ ) используется с методом OPTIONS и представляет сервер. OPTIONS * HTTP/1.1
3. Версия HTTP, определяющая структуру оставшегося сообщения, указывая, какую версию предполагается использовать для ответа.

Заголовки

Заголовки запроса HTTP имеют стандартную для заголовка HTTP структуру: не зависящая от регистра строка, завершаемая ( ‘:’ ) и значение, структура которого определяется заголовком. Весь заголовок, включая значение, представляет собой одну строку, которая может быть довольно длинной.

Существует множество заголовков запроса. Их можно разделить на несколько групп:

• Основные заголовки (General headers), например, Via (en-US), относящиеся к сообщению в целом
• Заголовки запроса (Request headers), например, User-Agent , Accept-Type , уточняющие запрос (как, например, Accept-Language ), придающие контекст (как Referer ), или накладывающие ограничения на условия (like If-None ).
• Заголовки сущности, например Content-Length , относящиеся к телу сообщения. Как легко понять, они отсутствуют, если у запроса нет тела.

Последней частью запроса является его тело. Оно бывает не у всех запросов: запросы, собирающие (fetching) ресурсы, такие как GET , HEAD , DELETE , или OPTIONS , в нем обычно не нуждаются. Но некоторые запросы отправляют на сервер данные для обновления, как это часто бывает с запросами POST (содержащими данные HTML-форм).

Тела можно грубо разделить на две категории:

• Одноресурсные тела (Single-resource bodies), состоящие из одного отдельного файла, определяемого двумя заголовками: Content-Type и Content-Length . ), состоящие из множества частей, каждая из которых содержит свой бит информации. Они обычно связаны с HTML-формами.

Ответы HTTP

Строка статуса (Status line)

Стартовая строка ответа HTTP, называемая строкой статуса, содержит следующую информацию:

1. Версию протокола, обычно HTTP/1.1 .
2. Код состояния (status code), показывающая, был ли запрос успешным. Примеры: 200 , 404 или 302
3. Пояснение (status text). Краткое текстовое описание кода состояния, помогающее пользователю понять сообщение HTTP..

Пример строки статуса: HTTP/1.1 404 Not Found.

Заголовки

Заголовки ответов HTTP имеют ту же структуру, что и все остальные заголовки: не зависящая от регистра строка, завершаемая двоеточием ( ‘:’ ) и значение, структура которого определяется типом заголовка. Весь заголовок, включая значение, представляет собой одну строку.

Существует множество заголовков ответов. Их можно разделить на несколько групп:

• Основные заголовки (General headers), например, Via (en-US), относящиеся к сообщению в целом.
• Заголовки ответа (Response headers), например, Vary и Accept-Ranges , сообщающие дополнительную информацию о сервере, которая не уместилась в строку состояния.
• Заголовки сущности (Entity headers), например, Content-Length , относящиеся к телу ответа. Отсутствуют, если у запроса нет тела.

Последней частью ответа является его тело. Оно есть не у всех ответов: у ответов с кодом состояния, например, 201 или 204 , оно обычно отсутствует.

Тела можно разделить на три категории:

• Одноресурсные тела (Single-resource bodies), состоящие из отдельного файла известной длины, определяемые двумя заголовками: Content-Type и Content-Length .
• Одноресурсные тела (Single-resource bodies), состоящие из отдельного файла неизвестной длины, разбитого на небольшие части (chunks) с заголовком Transfer-Encoding (en-US), значением которого является chunked . , состоящие из многокомпонентного тела, каждая часть которого содержит свой сегмент информации. Они относительно редки.

Фреймы HTTP/2

Сообщения HTTP/1.x имеют несколько недостатков в отношении производительности:

• Заголовки, в отличие от тел, не сжимаются.
• Заголовки, которые зачастую практически совпадают у идущих подряд сообщений, приходится передавать по отдельности.
• Мультиплексность невозможна. Приходится открывать соединение для каждого сообщения, а тёплые (warm) соединения TCP эффективнее холодных (cold).

HTTP/2 переходит на новый уровень: он делит сообщения HTTP/1.x на фреймы, которые внедряются в поток. Фреймы данных из заголовков отделены друг от друга, что позволяет сжимать заголовки. Несколько потоков можно объединять друг с другом — такой процесс называется мультиплексированием — что позволяет более эффективно использовать TCP-соединения.

Фреймы HTTP сейчас прозрачны для веб-разработчиков. Это дополнительный шаг, который HTTP/2 делает по отношению к сообщениям HTTP/1.1 и лежащему в основе транспортному протоколу. Для реализации фреймов HTTP веб-разработчикам не требуется вносить изменения в имеющиеся APIs; если HTTP/2 доступен и на сервере, и на клиенте, он включается и используется.

Заключение

Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет ещё один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создаётся надстройка над уже зарекомендовавшими себя методами.

Как отобразить текст в строке состояния браузера?

Как мы можем изменить текст, отображаемый в строке состояния браузера с помощью JavaScript (или jQuery)?

5 ответов

jQuery не обязательно это делать:

однако большинство новых браузеров не позволяют устанавливать текст в строке состояния из JavaScript.

это можно сделать. Поиск Google делает это, что видно при наведении указателя мыши на ссылку Google, в строке состояния отображается базовый сайт:

но когда вы нажимаете на него, он приводит вас к местоположению и URL-адресу, зависящему от пользователя, который выглядит как https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC8QFjAAahUKEwi4lP-Z4_rIAhVLk5QKHXRLAe8&url=https%3A%2F%2Fwww.example.com%2F&usg=AFQjCNFEbIRqDC65KFpmuak0aXKmnzjKVQ&bvm=bv.106923889,d.dGo . Url-адрес отслеживает Google и еще много чего, прежде чем перенаправлять вас на https://www.example.com . Вы можете легко проверить это, используя Network Inspector с «сохранить журнал».

они используют hacky hack но он работает во всех браузерах.

хитрость заключается в том, чтобы понять, что мы можем установить строку состояния почти на все, используя только HTLM a href (не требуется CSS или JavaScript). Все, что нам нужно, это обмануть анализатор браузера, думая, что href value является допустимым url-адресом, и он отобразит его.

попробуйте запустить этот фрагмент:

выход Chrome (нажмите изображение, чтобы развернуть): (v46.0.2490.80 м)

выход FireFox: (v42.0)

выход IE: (v11.0.9600.17905 обновление версии 11.0.21 (KB3065822))

выход Opera: (v33.0.1990.58 стабильный)

выход Seamonkey: (v2.38)

выход Avant: (V Ultimate 2015 build 28)

IE 11 двигатель:

IE совместимый двигатель:

выход Факела: (v42.0.0.10546)

выход Baidu: (v43.19.1000.119)

выход Maxthon: (В4.4.8.1000)

кроме того, нет необходимости использовать # (the идентификатор фрагмента). Браузеры будут рассматривать текст как http://some.message.here./and_more_message_here как действительный url-адрес тоже. Более странные строки могут считаться допустимыми в зависимости от браузера:

(хром, FireFox, IE, SM, Факел, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant хром, Avant Браузер firefox.)

(имена перечислены для браузеров с ожидаемым выходом, имена зачеркнуты («пример«) для браузеров без вывода строки состояния, а имена подчеркнуты («пример») для браузеров с неожиданным выходом/поведением. Протестировано с версиями браузера, такими же, как перечисленные выше.)

<a href=»http://a.b.c.d/test some spaces»>

(хром, Firefox и в IE, см, Факел, Байду, Макстон, Авант, т. е. 11, Авант т. е. Compat, Avant Chrome, Avant Firefox.)

<a href=»http://test some . spaces in domain part/a_b_c_d_e»>

(хром, в Firefox, то есть,SM, Факел, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox)

<a href=»http://test some . spaces in domain part without slash»>

(хром, в Firefox, то есть,SM, Факел, Байду, Макстон, Авант, т. е. 11, т. е. совместимости Авант, Авант хром, Avant Firefox)

(Chrome, FireFox, IE, SM, Факел, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

( Chrome, в Firefox, IE, SM, Факел, Baidu, Новости, Avant IE11, Avant IE Compat,Avant Chrome, Avant Firefox)

(Chrome, FireFox, IE, SM, Факел, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

<a href=»http://test @ with spaces»>

(хром, в Firefox, IE, SM, Факел, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox)

<a href=»http://test:password@ with spaces/»>

(хром, в Firefox, IE, SM, Факел, Байду, Макстон, Авант, т. е. 11, т. е. совместимости Авант, Авант Хром,Avant Firefox)

<a href=»http:// test : password @with.spaces/»>

(Chrome, FireFox,IE, SM, Факел, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome, Avant Firefox)

(Chrome, FireFox,IE, см, Факел, Байду, Макстон, Авант, т. е. 11, Авангарда, т. е. Compat, Avant Chrome, Avant Firefox)

повторите все строки теста выше, с http:// заменить на https:// , ftp:// , about:// , chrome:// , file:// , foobar:// и т. д.

мы видим, что если браузер не считает строку допустимым url-адресом, она не будет отображаться без строки состояния, поэтому никакого вреда не будет. (За исключением того, что похоже, что некоторые ошибки происходят для Avant IE Compat с помощью тестовой строки «http://a.b.c:port_with_letters_test» .)

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

это можно легко сделать с помощью return false :

выше двух фрагментов протестированы для работы на Chrome, FireFox, IE, SM, Torch, Байду, Макстон, Авант ИЕ11, т. е. совместимости Авант, Авант хром, Авант браузер Firefox.

последний шаг-использовать window.location или window.open имитировать поведение a href . Это можно сделать inline: (онлайн-тест)

или через return func() : (онлайн-тест)

или inline с setTimeout : (онлайн-тест)

или через return func() с setTimeout : (онлайн-тест)

выше два фрагмента также протестированы для работы на Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11 (с оговоркой, указанной в коде), Avant IE Compat (с оговоркой, указанной в коде), Avant Chrome, Avant Firefox.

кому это может касаться простого Примечания специфический для IE:

до IE6 и включая его вы могли бы сделать:

но после IE6 (протестировано IE7/8) вы делаете это таким же образом, но вам также необходимо адаптировать параметры безопасности браузера, включив функцию: Инструменты-Параметры Интернета-безопасность-пользовательский уровень:

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