Question window.onload vs document.onload


Lequel est le plus largement supporté: window.onload ou document.onload?


505
2018-02-25 21:45


origine


Réponses:


window.onload

Quand tirent-ils?

window.onload

  • Par défaut, il est déclenché lorsque toute la page 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 prêt.

document.onload

  • Il est appelé lorsque le DOM est prêt ce qui peut être avant que les images et autres contenus externes soient chargés.

Comment sont-ils pris en charge?

window.onload semble être le plus largement supporté. En fait, certains des navigateurs les plus modernes ont dans un sens 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 pour le document étant prêt comme ça:

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

Aux fins de l'histoire:

window.onload vs body.onload

Comme note, une question similaire a été posée sur codingforums il y a quelque temps concernant l'utilisation de window.onload plus de body.onload. Le résultat semblait être que vous devriez utiliser window.onload parce qu'il est bon de séparer votre structure de l'action.


517
2018-02-25 21:46



L'idée générale est que window.onload incendies lorsque la fenêtre du document est prêt pour la présentation et feux de document.onload quand le Arbre DOM (construit à partir du code de balisage dans le document) est terminé.

Idéalement, souscrire à Événements DOM-tree, permet des manipulations hors écran via Javascript, en encourageant presque pas de charge CPU. Au contraire window.onload pouvez prendre un moment pour tirer, lorsque plusieurs ressources externes doivent encore être demandées, analysées et chargées.

►Test d'essai:

Pour observer la différence et comment votre navigateur de choix met en oeuvre le précité gestionnaires d'événements, insérez simplement le code suivant dans votre document - <body>- tag.

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

►Résultat:

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

  • Non document.onload un événement.
  • onload tire deux fois lorsqu'il est déclaré à l'intérieur du <body>, une fois lorsqu'il est déclaré à l'intérieur du <head> (où l'événement agit alors comme document.onload ).
  • compter et agir en fonction de l'état du compteur permet d'émuler les deux comportements d'événements.
  • Vous pouvez également déclarer le window.onload gestionnaire d'événements dans les limites du HTML-<head> élément.

►Exemple Projet:

Le code ci-dessus provient de ce projet base de code (index.html et keyboarder.js).


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


233
2017-09-10 12:05



Selon Analyse des documents HTML - La fin,

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

  2. UNE DOMContentLoadedest envoyé à la document lorsque tout le HTML a été analysé et exécuté. L'événement fait des bulles à la window.

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

  4. UNE load événement est envoyé à la window.

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

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

Une bulle load écouteur d'événement (y compris onload gestionnaire d'événements) dans document ne devrait jamais être invoqué. Seulement capturer load Les écouteurs peuvent être appelés, mais en raison du chargement d'une sous-ressource telle qu'une feuille de style, et non en raison de la charge 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
};


51
2017-07-22 02:49



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

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


2 jQuery

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


Bonne chance.


45
2018-06-28 11:57



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

Vous pouvez explorer cela par l'extrait de code 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 verrez juste "body onload" dans Firefox et IE. Si tu cours "window.onload.toString()"dans les consoles d'IE & FF, vous verrez:

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

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


10
2018-01-26 04:08



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


5
2018-02-25 21:47



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

document.onload et onload gestionnaire sur toutes les balises HTML semble être réservé mais jamais déclenché

'onload'dans le document -> true


3
2018-06-12 00:21