Что более широко поддерживается: window.onload
или document.onload
?
В некоторых браузерах он теперь берет на себя роль document.onload
и запускается, когда DOM также готов.
document.onload
window.onload
представляется наиболее широко поддерживаемым. Фактически, некоторые из самых современных браузеров в некотором смысле заменили document.onload
на window.onload`.
Проблемы с поддержкой браузера, скорее всего, являются причиной того, что многие люди начинают использовать библиотеки, такие как jQuery, для обработки проверки готовности документа, например:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
Для целей истории. window.onload
vs body.onload
:
Аналогичный вопрос был задан на кодирующих форумах некоторое время назад относительно использования
window.onload
надbody.onload
. , В результате вы должны использовать «window.onload», потому что это так хорошо отделить вашу структуру от действия.
Общая идея заключается в том, что window.onload запускает , когда окно документа готово к презентации , и document.onload запускает , когда DOM дерево (построенное из кода разметки в документ) завершен .
В идеале, подписка на мероприятия DOM-дерева позволяет осуществлять манипулирование за кадром через Javascript, что приводит к почти отсутствию загрузки процессора . Наоборот, window.onload
может потратить некоторое время на запуск , когда несколько внешних ресурсов еще не запрошены, проанализированы и загружены.
►Тестовый сценарий:
Чтобы заметить разницу и как ваш браузер по выбору обращений вышеупомянутых обработчиков событий , просто вставьте следующий код в документ - `` < body > ``` - тег.
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►Результат:
Вот результирующее поведение, наблюдаемое для Chrome v20 (и, вероятно, большинства современных браузеров).
`document.onload
`событие.` `onload
`` < body > ```
, один раз при объявлении внутри `< > ``` '(где событие затем действует как ```
document.onload``` `).` window.onload
в пределах элемента HTML-`` < head > ```.►Пример проекта:
Приведенный выше код взят из кодовой базы этот проект (index.html
и `` keyboarder.js```).
Список обработчиков событий оконного объекта см. В документации MDN.
Добавить слушателя событий
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
& Лт; hr >
Обновление марта 2017 года
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
& Лт; hr >
$(window).on('load', function() {
console.log('All assets are loaded')
})
& Лт; hr > Удачи.
Согласно Перенос документов HTML - конец,
Браузер анализирует источник HTML и запускает отложенные сценарии.
DOMContentLoaded
отправляется в документ
, когда весь HTML проанализирован и запущен. Событие пузырится на «окно».
Браузер загружает ресурсы (например, изображения), которые задерживают событие загрузки.
Событие load
отправляется в window
.
Следовательно, порядок исполнения будет
DOMContentLoaded
window
на этапе захватаDOMContentLoaded
документа`DOMContentLoaded
window
в фазе пузыряload
слушатели событий (включая onload
обработчик событий) window
Никогда не следует вызывать пузырьковый прослушиватель событий load
(включая обработчик событий onload
) в document
. Можно вызывать только слушателей захвата load
, но из-за загрузки субресурса, такого как таблица стилей, а не из-за загрузки самого документа.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - bubble'); // 3rd
});
window.addEventListener('load', function() {
console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
/* Filter out load events not related to the document */
if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
console.log('window - load - bubble'); // 4th
});
window.onload = function() {
console.log('window - onload'); // 4th
};
document.onload = function() {
console.log('document - onload'); // DOES NOT HAPPEN
};
& Лт;!- конец фрагмента - >
В Chrome window.onload отличается от < body onload = "" >
, тогда как они одинаковы как в Firefox (версия 35.0), так и в IE (версия 11).
Вы можете исследовать это по следующему фрагменту:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>
И вы увидите как «загруженное окно» (которое приходит первым), так и «загрузку тела» в консоли Chrome. Тем не менее, вы увидите только «загрузку тела» в Firefox и IE. Если вы запустите «'window.onload.toString ()`» на консолях IE & FF, вы увидите:
"функция onload (event) {bodyOnloadHandler ()}"
что означает, что назначение "window.onload = функция (e)..."записано.
window.onload
и onunload
являются ярлыками для document.body.onload
и document.body.onunload
обработчик document.onload
и onload
на всех тегах html, кажется, зарезервирован, но никогда не запускается
«onload» в документе - > правда
window.onload однако они часто одно и то же. Точно так же body.onload становится window.onload в IE .