Выполнение скрипта после загрузки страницу javascript и jquery

Код кроссбраузерной поддержки

«Родное» событие есть не во всех браузерах, поэтому мы рассмотрим код для кроссбраузерной поддержки этого события:

function bindReady(handler){

	var called = false

	function ready() { // (1)
		if (called) return
		called = true
		handler()
	}

	if ( document.addEventListener ) { // (2)
		document.addEventListener( "DOMContentLoaded", function(){
			ready()
		}, false )
	} else if ( document.attachEvent ) {  // (3)

		// (3.1)
		if ( document.documentElement.doScroll && window == window.top ) {
			function tryScroll(){
				if (called) return
				if (!document.body) return
				try {
					document.documentElement.doScroll("left")
					ready()
				} catch(e) {
					setTimeout(tryScroll, 0)
				}
			}
			tryScroll()
		}

		// (3.2)
		document.attachEvent("onreadystatechange", function(){

			if ( document.readyState === "complete" ) {
				ready()
			}
		})
	}

	// (4)
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    /*  else  // (4.1)
        window.onload=ready
	*/
}

Разберем его по шагам.

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

   Поэтому завернем обработчик в функцию , единственный смысл которой — гарантировать, что будет вызван не более одного раза.

2. Событие поддерживают достаточно новые Firefox, Opera, Safari/Chrome. Нет гарантии, что версия посетителя поддерживает это событие, но попробовать стоит.
3. Браузер Internet Explorer не поддерживает , поэтому для него используются обходные пути.
   1. Функция пытается скроллить документ вызовом . Если получается — значит, документ загрузился, если нет — заказывает повторную попытку через setTimeout, и так пока документ наконец не будет готов. На практике это очень надежный способ, но есть проблемы с фреймами, поэтому используется только для окон верхнего уровня.
      Дополнительный фильтр — проверка
   2. Событие с проверкой , как и , срабатывает после загрузки документа. Но, к сожалению, оно происходит уже после загрузки картинок. Поэтому — вообще говоря, не то, что нам надо. Но это событие работает для фреймов, и при этом срабатывает до . Поэтому будем использовать и этот способ.
4. Для тех браузеров, в которых не сработали предыдущие методы (например, очень старый Firefox), добавим вызов обработчика при событии .
   1. Для совсем древних браузеров, в которых нет , вы можете раскомментировать и строчку (4.1). При этом, разумеется, возможен конфликт с другими обработчиками .

Этот код взят, с небольшими упрощениями, из библиотеки jQuery, а методы придуманы различными авторами.

Синхронные запросы

Если в методе третий параметр установлен на , запрос выполняется синхронно.

Другими словами, выполнение JavaScript останавливается на и возобновляется после получения ответа. Так ведут себя, например, функции или .

Вот переписанный пример с параметром , равным :

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

Многие продвинутые возможности , такие как выполнение запроса на другой домен или установка таймаута, недоступны для синхронных запросов. Также, как вы могли заметить, ни о какой индикации прогресса речь тут не идёт.

Из-за всего этого синхронные запросы используют очень редко. Мы более не будем рассматривать их.

Это отлично работает

1. Я должен проверить, есть ли доступный файл PDF для записи. перед открытием нового пустого окна, чтобы получить файл, а затем закрыть его, как в случае1

Сценарий для случая 2:

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

Я уже искал это и все еще в настоящее время ищу не только здесь, но, к сожалению, я не смог найти ответ по этой проблеме. Любая помощь приветствуется.

Обновление . Для меня сработало использование XMLHttpRequest, чтобы мне не нужно было открывать новую пустую вкладку, чтобы мои php-заголовки служили мне файлом PDF.

Вот код, который я использую:

URL-адрес, который я использовал, был обработан контроллером, который дает мне pdf-файл с использованием заголовков php.

Политика «Одинакового источника»

Два URL имеют «одинаковый источник» в том случае, если они имеют совпадающие протокол, домен и порт.

• (другой домен: важен)
• (другой домен: важен)
• (другой протокол: )
• (другой порт: )

Политика «Одинакового источника» говорит, что:

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

Внутри находится по сути отдельное окно с собственными объектами и .

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

• ссылка на объект внутри .
• – ссылка на объект внутри , короткая запись для .

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

Для примера давайте попробуем чтение и запись в ифрейм с другим источником:

Код выше выведет ошибку для любых операций, кроме:

• Получения ссылки на внутренний объект из
• Изменения .

С другой стороны, если у ифрейма тот же источник, то с ним можно делать всё, что угодно:

и

Событие – по сути то же, что и . Оно сработает, когда встроенное окно полностью загрузится со всеми ресурсами.

…Но всегда доступно извне ифрейма, в то время как доступ к разрешён только из окна с тем же источником.

Особенность метода doScroll

В новых Firefox, Safari/Chrome и во всех Internet Explorer поддерживается атрибут тэга . Он позволяет загружать скрипт не блокируя загрузку страницы, а параллельно с ней.

Такая отложенная загрузка скриптов позволяет странице грузиться и отображаться быстрее. Обычно откладывают загрузку для толстых библиотек.

Скрипт является объектом, необходимым для загрузки страницы, и событие всегда срабатывает после загрузки скриптов.

Но Internet Explorer заканчивает рендеринг документа и делает скроллинг возможным до загрузки скриптов с атрибутом .
Поэтому сработает до загрузки таких скриптов.

Это может быть важно, если вы хотите использовать такие скрипты в коде инициализации

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3javascript.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() {  alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies:

<body onload=»checkCookies()»><script>
function checkCookies() {  var text = «»;  if (navigator.cookieEnabled == true) {    text = «Cookies are enabled.»;  } else {     text = «Cookies are not enabled.»;
  }  document.getElementById(«demo»).innerHTML = text;}</script>

❮ DOM Events
❮ Event Object

IE8,9: XDomainRequest

В IE8 и IE9 поддержка ограничена:

• Не поддерживаются события, кроме .
• Некорректно поддерживается состояние : браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу до того, как он будет до конца получен.

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

А обычный решили не трогать, чтобы ненароком не сломать существующий код.

Мы подробнее поговорим про в главе XMLHttpRequest: кросс-доменные запросы. Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 – вместо нужно использовать .

Кросс-браузерно:

Теперь в IE8,9 поддерживаются события , и . Это именно для IE8,9. Для IE10 обычный уже является полноценным.

Обычно ответы на запросы кешируются, как и обычные страницы.

Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например .

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

Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.

Например, вместо написать:

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

Полный синтаксис window.open

Полный синтаксис:

Функция возвращает ссылку на объект нового окна, либо , если окно было заблокировано браузером.

Параметры:

URL для загрузки в новое окно.

Имя нового окна. Может быть использовано в параметре в формах. Если позднее вызвать с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.

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

Значения параметров .

1. Настройки расположения окна:

(число)

Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.

(число)

Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

1. Свойства окна:

(yes/no)

Скрыть или показать строку меню браузера.

(yes/no)

Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне.

(yes/no)

Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.

(yes/no)

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

(yes/no)

Позволяет отключить возможность изменять размеры нового окна. Значение обычно неудобно посетителям.

(yes/no)

Разрешает убрать полосы прокрутки для нового окна. Значение обычно неудобно посетителям.

1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.

Важно:

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

Важные моменты:

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

Content Security Policy

Ранее, одним из главных принципов безопасности браузеров являлась политика Same Origin Policy. Ее суть заключается в проверке трех компонентов, из которых состоит origin: протокол, хост и порт. Однако при внедрении пейлода с одного сайта на другой SOP будет бесполезен для сайта с внедренным пейлоадом. Поэтому на смену SOP пришел CSP, основное предназначение которого состоит в том, чтобы защитить пользователя от угроз межсайтового выполнения сценариев. CSP описывает безопасные источники загрузки ресурсов, устанавливает правила использования встроенных стилей, скриптов, а также динамической оценки JavaScript. Самое главное — загрузка с ресурсов, не входящих в «белый список», блокируется.

Поддерживаемые директивы:

• Default-src: определение политики загрузки для всех типов ресурсов в случае, если определенная директива типа ресурса не определена (резервная);
• Script-src: какие скрипты могут использовать защищенный ресурс;
• Object-src: откуда ресурс может загружать плагины;
• Style-src: какие стили (CSS) пользователь применяет к защищенному ресурсу;
• Img -src: откуда защищенный ресурс может загружать изображения;
• Media-src: откуда защищенный ресурс может загружать видео и аудио;
• Frame-src: где защищенный ресурс может вставлять кадры;
• Font-src: где защищенный ресурс может загружать шрифты;
• Connect-src: какие URI могут быть загружены защищенным ресурсом;
• Form-action: какие URI могут использоваться как результат работы HTML-формы;
• Sandbox: определяет политику «песочницы HTML»;
• Script-nonce: выполнение сценария, требуя наличия указанного nonce для элементов сценария;
• Plugin-types: набор плагинов, которые могут быть вызваны защищенным ресурсом, путем ограничения типов ресурсов, которые могут быть встроены;
• Reflection-xss: активировать или деактивировать любые проверки, используемые для фильтрации или блокирования отраженных атак между сайтами, эквивалентные нестандартному заголовку X-XSS-Protection;
• Report-uri: указывает URI, на который агент пользователя отправляет отчеты о нарушении правил.

Атрибут ифрейма sandbox

Атрибут позволяет наложить ограничения на действия внутри , чтобы предотвратить выполнение ненадёжного кода. Атрибут помещает ифрейм в «песочницу», отмечая его как имеющий другой источник и/или накладывая на него дополнительные ограничения.

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

Другими словами, если у атрибута нет значения, то браузер применяет максимум ограничений, но через пробел можно указать те из них, которые мы не хотим применять.

Вот список ограничений:

принудительно устанавливает «другой источник» для ифрейма. Другими словами, он заставляет браузер воспринимать , как пришедший из другого источника, даже если содержит тот же сайт. Со всеми сопутствующими ограничениями для скриптов. Эта опция отключает это ограничение.

Позволяет ифрейму менять .

Позволяет отправлять формы из ифрейма.

Позволяет запускать скрипты из ифрейма.

Позволяет открывать всплывающие окна из ифрейма с помощью .

Больше опций можно найти в справочнике.

Пример ниже демонстрирует ифрейм, помещённый в песочницу со стандартным набором ограничений: . На странице содержится JavaScript и форма.

Обратите внимание, что ничего не работает. Таким образом, набор ограничений по умолчанию очень строгий:. Результат
index.html
sandboxed.html

Результат
index.html
sandboxed.html

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

Событие onprogress в деталях

При обработке события onprogress есть ряд важных тонкостей.

Заметим, что событие, возникающее при onprogress, имеет одинаковый вид на стадии закачки (в обработчике xhr.upload.onprogress) и при получении ответа (в обработчике xhr.onprogress).

Оно представляет  объект типа ProgressEvent со свойствами:

loaded

Сколько байт уже переслано.

Имеется в виду только тело запроса, заголовки не учитываются.

lengthComputable

Если true, то известно полное количество байт для пересылки, и оно хранится в свойстве total.

total

Общее количество байт для пересылки, если известно.

А может ли оно быть неизвестно?

• При закачке на сервер браузер всегда знает полный размер пересылаемых данных, так что total всегда содержит конкретное количество байт, а значение lengthComputable всегда будет true.
• При скачивании данных – обычно сервер в начале сообщает их общее количество в HTTP-заголовке Content-Length. Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда total будет равно нулю. А чтобы отличить нулевой размер данных от неизвестного – как раз служит lengthComputable, которое в данном случае равно false.

Ещё особенности, которые необходимо учитывать при использовании onprogress:

Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50 мс.Это обозначено в спецификации progress notifications.
В процессе получения данных, ещё до их полной передачи, доступен xhr.responseText, но он не обязательно содержит корректную строку.Можно до окончания запроса заглянуть в него и прочитать текущие полученные данные

Важно, что при пересылке строки в кодировке UTF-8 кириллические символы, как, впрочем, и многие другие, кодируются 2 байтами. Возможно, что в конце одного пакета данных окажется первая половинка символа, а в начале следующего – вторая

Поэтому полагаться на то, что до окончания запроса в responseText находится корректная строка нельзя. Она может быть обрезана посередине символа.Исключение – заведомо однобайтные символы, например цифры или латиница.
Сработавшее событие xhr.upload.onprogress не гарантирует, что данные дошли.Событие xhr.upload.onprogress срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. Он говорит лишь о самом факте отправки.Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.

Подробно о window.onload

1. Иногда, происходит такое, что вы, вроде бы и написали все правильно, но скрипт… просто не работает. И непонятно почему.

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

   Для этого существует window.onload

   window — объект.

   onload — это «событие». Иногда, на просторах интернета можно встретить разное название для этого события, но «onload» — это «Event», а в переводе — это событие.

   Использовать window.onload можно самым простым способом, размещаем данный скрипт на странице и после загрузки страницы, вы увидите сообщение о том «скрипт выполнился после загрузки страницы»

   <script>

   window.onload = function() {

   alert(‘Страница загружена’);

   };

   </script>

   Если у вас подключенный скрипт, то теги <script> и </script> не нужны.

   window.onload = function() {

   здесь помещаем все, что угодно…

   };

   object может быть например body или window, естественно к этому объекту, сперва нужно обратиться.

   object.onload=function(){/**код**/};

   В качестве атрибута onload, возможно использование в HTML :

   <element onload=»myFunction»></element>

2. Давайте попробуем создать эмуляцию window.onload, как это работает в реальном времени.

   Создадим скрипт и разместим его тут на странице:

   <script>

   window.onload = function() {

   alert(‘Страница загружена’);

   // к этому моменту страница загружена

   alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);

   };

   </script>

   <img id=»img» src=»https://dwweb.ru/__a-data/__all_for_scripts/__examples/js/onload/onload.jpg»>

   Нажмите кнопку window.onload :
   window.onload

3. Несколько вариантов для запуска вашего скрипта, при использовании JQuery

   $(window).load(function() {

   /** код запустится, когда страница будет полностью загружена на 100% **/

   });

   +

   //Вариант 1

   $(document).ready(function() {

   /** код запустится, когда будет готов DOM, исключая картинки **/

   // ваш код

   });

   //Вариант 2

   $(function() {

   /** код запустится, когда будет готов DOM, исключая картинки **/

   //ваш код

   });

   //Вариант 3

   $(document).on(‘ready’, function(){

   /** код запустится, когда будет готов DOM, исключая картинки **/

   //ваш код

   });

   //Вариант 4

   jQuery(document).ready(function(){

   /** код запустится, когда будет готов DOM, исключая картинки **/

   //ваш код

   });

   И!
   Не путаете window load jQuery с методом .

Последняя дата редактирования : 22.01.2021 00:06
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no

Ошибка в скрипте с другого источника

Есть правило: скрипты с одного сайта не могут получить доступ к содержимому другого сайта. Например, скрипт с не может прочитать почту пользователя на .

Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.

Это правило также касается ресурсов с других доменов.

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

Для примера давайте возьмём мини-скрипт , который состоит из одного-единственного вызова функции, которой не существует:

//  error.js
noSuchFunction();

Теперь загрузим этот скрипт с того же сайта, на котором он лежит:

<script>
window.onerror = function(message, url, line, col, errorObj) {
  alert(`${message}\n${url}, ${line}:${col}`);
};
</script>
<script src="/article/onload-onerror/crossorigin/error.js"></script>

Мы видим нормальный отчёт об ошибке:

А теперь загрузим этот же скрипт с другого домена:

<script>
window.onerror = function(message, url, line, col, errorObj) {
  alert(`${message}\n${url}, ${line}:${col}`);
};
</script>
<script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>

Отчёт отличается:

Детали отчёта могут варьироваться в зависимости от браузера, но основная идея остаётся неизменной: любая информация о внутреннем устройстве скрипта, включая стек ошибки, спрятана. Именно потому, что скрипт загружен с другого домена.

Зачем нам могут быть нужны детали ошибки?

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

Похожая кросс-доменная политика (CORS) внедрена и в отношении других ресурсов.

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

Существует три уровня кросс-доменного доступа:

1. Атрибут отсутствует — доступ запрещён.
2. — доступ разрешён, если сервер отвечает с заголовком со значениями или наш домен. Браузер не отправляет авторизационную информацию и куки на удалённый сервер.
3. — доступ разрешён, если сервер отвечает с заголовками со значением наш домен и . Браузер отправляет авторизационную информацию и куки на удалённый сервер.

В нашем случае атрибут отсутствовал. Поэтому кросс-доменный доступ был запрещён. Давайте добавим его.

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

Если куки нас не волнуют, тогда смело выбираем :

<script>
window.onerror = function(message, url, line, col, errorObj) {
  alert(`${message}\n${url}, ${line}:${col}`);
};
</script>
<script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>

Теперь при условии, что сервер предоставил заголовок , всё хорошо. У нас есть полный отчёт по ошибкам.

Основы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

Сначала рассмотрим асинхронный, так как в большинстве случаев используется именно он.

Чтобы сделать запрос, нам нужно выполнить три шага:

1. Создать .

2. Инициализировать его.

   Этот метод обычно вызывается сразу после . В него передаются основные параметры запроса:

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

   Заметим, что вызов , вопреки своему названию, не открывает соединение. Он лишь конфигурирует запрос, но непосредственно отсылается запрос только лишь после вызова .

3. Послать запрос.

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

   Некоторые типы запросов, такие как , не имеют тела. А некоторые, как, например, , используют , чтобы отправлять данные на сервер. Мы позже увидим примеры.

4. Слушать события на , чтобы получить ответ.

   Три наиболее используемых события:

   • – происходит, когда получен какой-либо ответ, включая ответы с HTTP-ошибкой, например 404.
   • – когда запрос не может быть выполнен, например, нет соединения или невалидный URL.
   • – происходит периодически во время загрузки ответа, сообщает о прогрессе.

Вот полный пример. Код ниже загружает с сервера и сообщает о прогрессе:

После ответа сервера мы можем получить результат запроса в следующих свойствах :

Код состояния HTTP (число): , , и так далее, может быть в случае, если ошибка не связана с HTTP.

Сообщение о состоянии ответа HTTP (строка): обычно для , для , для , и так далее.

(в старом коде может встречаться как )

Тело ответа сервера.

Мы можем также указать таймаут – промежуток времени, который мы готовы ждать ответ:

Если запрос не успевает выполниться в установленное время, то он прерывается, и происходит событие .

URL с параметрами

Чтобы добавить к URL параметры, вида , и корректно закодировать их, можно использовать объект URL:

Несколько обработчиков

Код из примера выше позволяет навешивать только один обработчик. Для поддержки нескольких — добавим дополнительную обертку:

readyList = []

function onReady(handler) {

	if (!readyList.length) {
		bindReady(function() {
			for(var i=0; i<readyList.length; i++) {
				readyList()
			}
		})
	}

	readyList.push(handler)
}

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

Следующий пример демонстрирует использование :

<html>
<head>
<script src="bindReady.js"></script>
<script src="onReady.js"></script>

<script>
  onReady(function() {
    var divs = document.body.getElementsByTagName('div')
    alert(divs.innerHTML)
  })
</script>

<link rel="stylesheet" href="my.css" type="text/css">
</head>
<body>

<img src="img5.php"/>

<div>done</div>
</body>
</html>

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

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

Итого

Типичный код GET-запроса с использованием :

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

• – начало запроса.
• – прибыла часть данных ответа, тело ответа полностью на данный момент можно получить из свойства .
• – запрос был прерван вызовом .
• – произошла ошибка соединения, например неправильное доменное имя. Событие не генерируется для HTTP-ошибок как, например, 404.
• – запрос успешно завершён.
• – запрос был отменён по причине истечения отведённого для него времени (происходит, только если был установлен таймаут).
• – срабатывает после , , или .

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

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

Также мы уже видели событие: . Исторически оно появилось одним из первых, даже раньше, чем была составлена спецификация. Сегодня нет необходимости использовать его, так как оно может быть заменено современными событиями, но на него можно часто наткнуться в старом коде.

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

Итого

Чтобы вызвать метод или получить содержимое из другого окна, нам, во-первых, необходимо иметь ссылку на него.

Для всплывающих окон (попапов) доступны ссылки в обе стороны:

• При открытии окна: открывает новое окно и возвращает ссылку на него,
• Изнутри открытого окна: – ссылка на открывающее окно.

Для ифреймов мы можем иметь доступ к родителям/потомкам, используя:

• – коллекция объектов вложенных ифреймов,
• , – это ссылки на родительское окно и окно самого верхнего уровня,
• – это объект внутри тега .

Если окна имеют одинаковый источник (протокол, домен, порт), то они могут делать друг с другом всё, что угодно.

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

• Изменение свойства location другого окна (доступ только на запись).
• Отправить туда сообщение.

Исключения:

• Окна, которые имеют общий домен второго уровня: и . Установка свойства в обоих окнах переведёт их в состояние «Одинакового источника».
• Если у ифрейма установлен атрибут , это принудительно переведёт окна в состояние «разных источников», если не установить в атрибут значение . Это можно использовать для запуска ненадёжного кода в ифрейме с того же сайта.

Метод позволяет общаться двум окнам с любыми источниками:

1. Отправитель вызывает .

2. Если не , тогда браузер проверяет имеет ли источник .

3. Если это так, тогда вызывает событие со специальными свойствами:

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

   В окне-получателе следует добавить обработчик для этого события с помощью метода .