web-dev-qa-db-fra.com

window.onload vs document.onload

Ce qui est plus largement supporté: window.onload ou document.onload?

javascriptdom-events
621
Chris Ballance

Quand tirent-ils?

window.onload

  • Par défaut, il est déclenché lorsque la page entière est chargée , y compris son contenu (images, CSS, scripts, etc.).

Dans certains navigateurs, il prend désormais le rôle de _document.onload_ et se déclenche lorsque le DOM est également prêt.

_document.onload_

  • Il est appelé lorsque le DOM est prêt, ce qui peut être préalable aux images et tout autre contenu externe est chargé.

Dans quelle mesure sont-ils pris en charge?

_window.onload_ semble être le plus largement pris en charge. En fait, certains des navigateurs les plus modernes ont en quelque sorte remplacé _document.onload_ par _window.onload_.

Les problèmes de support du navigateur sont probablement la raison pour laquelle de nombreuses personnes commencent à utiliser des bibliothèques telles que jQuery pour gérer la vérification de la préparation du document, comme suit:

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

Aux fins de l'histoire. _window.onload_ vs _body.onload_:

Une question similaire a été posée sur codingforums il y a quelque temps concernant l'utilisation de _window.onload_ sur _body.onload_. Le résultat semble être que vous devez utiliser _window.onload_ car il est bon de séparer votre structure de l’action.

635
Josh Mein

L'idée générale est que window.onload se déclenche lorsque la fenêtre du document est prête à être présentée et document.onload se déclenche lorsque l’arbre DOM (construit) du code de balisage dans le document) est complétée .

L'idéal serait de s'abonner à événements d'arborescence DOM , de permettre les manipulations hors écran via Javascript, sans entraîner presque aucune charge processeur . Au contraire, _window.onload_ ( peut prendre un certain temps pour tirer , lorsque plusieurs ressources externes doivent encore être demandées, analysées et chargées.

►Scénario de test:

Pour observer la différence et comment votre navigateur de choix met en œuvre ce qui précède gestionnaires d'événements , insérez simplement le code suivant dans la balise - _<body>_- de votre document.

_<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>
_

►Result:

Voici le comportement résultant, observable pour Chrome v20 (et probablement les navigateurs les plus récents).

  • Aucun événement _document.onload_.
  • onload se déclenche deux fois lorsqu'il est déclaré dans le _<body>_, une fois lorsqu'il est déclaré dans le _<head>_ (l'événement se comporte alors comme _document.onload_).
  • compter et agir en fonction de l'état du compteur permet d'émuler les deux comportements d'événement.
  • Sinon, déclarez le gestionnaire d'événements _window.onload_ dans les limites de l'élément HTML -_<head>_.

►Exemple de projet:

Le code ci-dessus provient de du projet codebase (_index.html_ et _keyboarder.js_).

Pour obtenir une liste de gestionnaires d'événements de l'objet window , veuillez vous reporter à la documentation MDN.

256
Lorenz Lo Sauer

Ajouter un écouteur d'événement

<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 vanille JavaScript

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

2 jQuery

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

Selon Analyse de documents HTML - La fin ,

  1. Le navigateur analyse la source HTML et exécute des scripts différés.

  2. Une DOMContentLoaded est envoyée à la document lorsque tout le code HTML a été analysé et exécuté. L'événement bouillonne à la window.

  3. Le navigateur charge des ressources (telles que des images) qui retardent l'événement de chargement.

  4. Un événement load est distribué à la window.

Par conséquent, l'ordre d'exécution sera

  1. DOMContentLoaded écouteurs d'événement de window en phase de capture
  2. DOMContentLoaded écouteurs d'événement de document
  3. DOMContentLoaded écouteurs d'événement de window dans la phase de bulle
  4. load écouteurs d'événement (y compris onload gestionnaire d'événements) de window

Un écouteur d'événements load à bulles (y compris le gestionnaire d'événements onload) dans document ne doit jamais être appelé. Capture uniquement load des écouteurs peuvent être appelés, mais en raison du chargement d'une sous-ressource telle qu'une feuille de style, et non du chargement du document lui-même.

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
};
64
Oriol

Dans Chrome, window.onload est différent de <body onload="">, alors qu'ils sont identiques dans Firefox (version 35.0) et IE (version 11).

Vous pouvez explorer cela avec l'extrait suivant:

<!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>

Et vous verrez à la fois "fenêtre chargée" (qui vient en premier) et "body onload" dans la console Chrome. Cependant, vous ne verrez que "body onload" dans Firefox et IE. Si vous exécutez "window.onload.toString()" dans les consoles de IE & FF, vous verrez:

"function onload (event) {bodyOnloadHandler ()}"

ce qui signifie que l'affectation "window.onload = function (e) ..." est écrasée.

12
VincentZHANG

window.onload et onunload sont des raccourcis vers document.body.onload et document.body.onunload

Les gestionnaires document.onload et onload sur toutes les balises html semblent être réservés, mais jamais déclenchés

'onload' dans le document -> true

6
garaboncias

window.onload mais ils sont souvent la même chose. De même, body.onload devient window.onload dans IE.

5
AnthonyWJones

Window.onload est cependant la norme: le navigateur Web de la PS3 (basé sur Netfront) ne prend pas en charge l’objet window. Vous ne pouvez donc pas l’utiliser ici.

1
gotofritz