События "onload", "onbeforeunload" и "onerror"

Браузер позволяет отслеживать загрузку внешних ресурсов — скриптов, ифреймов, картинок и других.

Для этого есть два события:

• onload — если загрузка успешна.
• onerror — если при загрузке произошла ошибка.

Кроме того, обработчик window.onerror вызывается при ошибках JavaScript, которые не были пойманы try..catch.

Загрузка SCRIPT

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

Подгрузить внешний скрипт — достаточно просто:

var script = document.createElement('script');
script.src = "my.js";
document.documentElement.appendChild(script);

…Но, после подгрузки нужно запустить функцию создания компонента. Как определить, что скрипт загрузился?

onload

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

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"
document.documentElement.appendChild(script);

*!*
script.onload = function() {
  alert(jQuery); 
}
*/!*

..А что, если загрузка скрипта не удалась? Например, такого скрипта на сервере нет (ошибка 404).

onerror

Любые ошибки загрузки (но не выполнения) скрипта отслеживаются обработчиком onerror:

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/404.js"
document.documentElement.appendChild(script);

*!*
script.onerror = function() {
  alert("Ошибка: " + this.src); 
}
*/!*

IE<9: onreadystatechange

Примеры выше работают во всех браузерах, кроме IE<9.

В IE для отслеживания загрузки есть другое событие: onreadystatechange. Оно срабатывает многократно, при каждом обновлении состояния загрузки.

Текущая стадия процесса находится в script.readyState:

loading

В процессе загрузки.

loaded

Получен ответ с сервера — скрипт или ошибка. Скрипт на фазе loaded может быть ещё не выполнен.

complete

Скрипт выполнен.

Например, рабочий скрипт:

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
document.documentElement.appendChild(script);

*!*
script.onreadystatechange = function() {
  alert(this.readyState); // loading -> loaded -> complete
}
*/!*

Скрипт с ошибкой:

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/404.js";
document.documentElement.appendChild(script);

*!*
script.onreadystatechange = function() {
  alert(this.readyState);  // loading -> loaded
}
*/!*

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

Нет особой стадии для ошибки. В примере выше это видно, обработка останавливается на loaded.

Итак, самое надёжное средство для IE<9 поймать загрузку (и ошибку) — это повесить обработчик на событие loaded. Так как скрипт может быть ещё не выполнен к этому моменту, то вызов функции лучше сделать через setTimeout(.., 0).

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

Пример вызывает afterLoad после загрузки скрипта. Работает только в IE:

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
document.documentElement.appendChild(script);

function afterLoad() {
  alert("Загрузка завершена: " + typeof(jQuery));
}

*!*
script.onreadystatechange = function() {
  if (this.readyState == "complete") { // на случай пропуска loaded
    afterLoad(); // (2)
  }

  if (this.readyState == "loaded") {
    setTimeout(afterLoad, 0);  // (1)
    
    // убираем обработчик, чтобы не сработал на complete
    this.onreadystatechange = null; 
  }
}
*/!*

Вызов (1) выполнится при первой загрузке скрипта, а (2) — при второй, когда он уже будет в кэше, и стадия станет сразу complete.

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

Кросс-браузерное решение

Для кросс-браузерности поставим обработчик на все три события: onload, onerror, onreadystatechange.

Пример ниже выполняет функцию afterLoad после загрузки скрипта.

Работает везде:

var script = document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";
document.documentElement.appendChild(script);

function afterLoad() {
  alert("Загрузка завершена: " + typeof(jQuery));
}

script.onload = script.onerror = function() {
  if (!this.executed) { // выполнится только один раз
    this.executed = true;
    afterLoad();
  }
};

script.onreadystatechange = function() {
  var self = this;
  if (this.readyState == "complete" || this.readyState == "loaded") {
    setTimeout(function() { self.onload() }, 0);// сохранить "this" для onload
  }
};

Обработчики на window

window.onerror

Обработчик window.onerror вызывается в случае ошибки, выпавшей из всех блоков try..catch:

Аргументы обработчика:

message

Сообщение об ошибке.

source

Файл

lineno

Номер строки с ошибкой

Например:

<script>
window.onerror = function(message, source, lineno) {
  alert("Ошибка:"+message +"\n" +
    "файл:" + source + "\n" +
    "строка:" + lineno);
};

</script>

<body>
  <button onclick="alert(blablabla);">alert(blablabla)</button>
</body>

Реакция браузера на ошибку (запуск отладчика?) может быть отменена через return false из обработчика.

window.onload

Обработчик window.onload срабатывает, когда загружается вся страница, включая ресурсы на ней — стили, картинки, ифреймы и т.п.

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

<iframe src="http://example.com/" style="height:60px"></iframe>
<link type="text/css" rel="stylesheet" href="/some.css">
<img src="/some.png">
<script>
*!*
  window.onload = function() {
    alert('Документ и все ресурсы загружены')
  }
*/!*
</script>

window.onunload

Когда человек уходит со страницы или закрывает окно, срабатывает window.unload. В нём можно, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя.

Это позволяет другое событие — window.onbeforeunload.

window.onbeforeunload

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

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

window.onbeforeunload = function() {
  return "Данные не сохранены. Точно перейти?";
};

Особенности:

• Событие не поддерживается Opera
• Firefox игнорирует текст, а показывает своё сообщение. Это сделано в целях безопасности.

Кликните на кнопку в IFRAME'е ниже, чтобы поставить обработчик, а затем по ссылке, чтобы увидеть его в действии:

Открыть в новом окне

Обработчики на IMG, IFRAME, LINK

Поддержка событий для других типов ресурсов:

IMG

Пддерживают onload/onerror во всех браузерах.

IFRAME

Поддерживает onload во всех браузерах. Это событие срабатывает как при успешной загрузке, так и при ошибке.

LINK (стили)

Поддерживает onload/onerror в некоторых браузерах. Замечательная статья про обработчик на загрузку стиля: When is a styleshet really loaded?.

Итого

В этой статье мы рассмотрели события onload/onerror и window.onbeforeunload.

Их можно обобщить, разделив на рецепты:

Отловить загрузку скрипта (включая ошибку)

Ставим обработчики на onload + onerror + (для IE<9) onreadystatechange, как указано в рецепте выше

Отловить загрузку изображения (включая ошибку)

Ставим обработчики на onload + onerror

var img = document.createElement('img');
img.onload = function() { alert("OK "+this.src };
img.onerror = function() { alert("FAIL "+this.src }
img.src = ...

Изображения начинают загружаться сразу при создании, не нужно их для этого вставлять в HTML.

Чтобы работало в IE<9, src нужно ставить после onload/onerror.

Отловить загрузку IFRAME

Поддерживается только обработчик onload. Он сработает, когда IFRAME загрузится, со всеми подресурсами, а также в случае ошибки.

<iframe src="http://example.com/" style="height:60px"></iframe>
<script>
*!*
  document.getElementsByTagName('iframe')[0].onload = function() {
    alert('IFRAME загружен')
  }
*/!*
</script>

Отловить полную загрузку страницы

Обработчик window.onload (сработает, когда окно загрузится со всеми ресурсами).
Далее мы рассмотрим событие onDOMContentLoaded, которое срабатывает при загрузке документа и не ждёт картинок, стилей, ифреймов.

Отловить загрузку файла со стилями

When is a styleshet really loaded?.

addScripts(["1.jpg", "2.jpg", "3.jpg"], callback);

// go.js содержит функцию go()
addScript("go.js", function() {
 go();
});

var script = document.createElement('script');
script.src = src;

// в документе может не быть HEAD или BODY,
// но хотя бы один (текущий) SCRIPT в документе есть
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s); // перед ним и вставим

addScripts(["a.js", "b.js", "c.js"], function() { a() });
/* функция a() описана в a.js и использует b.js,c.js */