window.onload против document.onload [закрыто]

StackOverflow https://stackoverflow.com/questions/588040

  •  09-09-2019
  •  | 
  •  

Вопрос

Что более широко поддерживается: window.onload или document.onload?

Это было полезно?

Решение

Когда они стреляют?

window.onload

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

В некоторых браузерах теперь он берет на себя роль document.onload и срабатывает, когда DOM также готов.

document.onload

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

Насколько хорошо они поддерживаются?

window.onload представляется наиболее широко поддерживаемым.Фактически, некоторые из самых современных браузеров в некотором смысле заменили document.onload с window.onload.

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

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

В целях истории. window.onload против 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>, один раз при объявлении внутри <head> (где событие тогда действует как 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>

Update March 2017

1 Ванильный JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

Удачи.

В соответствии с Парсинг HTML-документов – конец,

  1. Браузер анализирует исходный код HTML и запускает отложенные сценарии.

  2. А DOMContentLoaded отправляется в г. document когда весь HTML-код был проанализирован и запущен.Событие всплывает на window.

  3. Браузер загружает ресурсы (например, изображения), которые задерживают событие загрузки.

  4. А load событие отправляется в window.

Поэтому порядок выполнения будет

  1. DOMContentLoaded слушатели событий window на этапе захвата
  2. DOMContentLoaded слушатели событий document
  3. DOMContentLoaded слушатели событий window в фазе пузыря
  4. load прослушиватели событий (включая onload обработчик событий) из window

Пузырь load прослушиватель событий (включая onload обработчик событий) в document никогда не следует вызывать. Только захват load прослушиватели могут быть вызваны, но из-за загрузки подресурса, такого как таблица стилей, а не из-за загрузки самого документа.

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 = function(e)...» перезаписывается.

window.onload и onunload являются ярлыками для document.body.onload и document.body.onunload

document.onload и onload обработчик для всех тегов html кажется зарезервированным, но никогда не срабатывает

'onload' в документе -> правда

window.onload, однако зачастую это одно и то же.Аналогично body.onload становится window.onload в IE.

Однако Window.onload является стандартом — веб-браузер PS3 (на базе Netfront) не поддерживает объект окна, поэтому вы не можете использовать его там.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top