Lequel est le plus largement soutenu : window.onload ou document.onload ?
Dans certains navigateurs, il prend désormais le rôle de document.onload et se déclenche lorsque le DOM est prêt également.
document.onload
window.onload semble être le plus largement soutenu. En fait, certains des navigateurs les plus modernes ont en quelque sorte remplacé document.onload con window.onload .
Les problèmes de prise en charge des navigateurs sont très probablement la raison pour laquelle de nombreuses personnes commencent à utiliser des bibliothèques telles que jQuery pour gérer la vérification que le document est prêt, comme ceci :
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });Pour les besoins de l'histoire. window.onload vs body.onload :
Une question similaire a été posée sur codingforums un moment il y a quelques temps, concernant l'utilisation de
window.onloadsurbody.onload. Le site Le résultat semble être que vous devriez utiliserwindow.onloadparce que c'est bon de séparer votre structure de l'action.
En fait, cette déclaration semble être dirigée vers un choix entre window.onload y <body onload=""> ce qui est complètement différent (et le "séparer la structure de l'action" a beaucoup plus de sens dans ce contexte). Non pas que la réponse soit fausse, mais sa base l'est.
Cette citation est grammaticalement horrible... un peu d'édition (marquée) ne devrait-elle pas aider ?
@Thor84no J'ai finalement trouvé le temps de jeter un autre coup d'œil à ce sujet. J'ai apporté quelques améliorations.
L'idée générale est que window.onload se déclenche lorsque la fenêtre du document est prêt pour la présentation y document.onload se déclenche lorsque le L'arbre DOM (construit à partir du code de balisage du document) est terminé .
L'idéal serait de s'abonner à Événements DOM-tree permet des manipulations hors écran par le biais de Javascript, ce qui implique charge CPU quasi nulle . Au contraire, window.onload puede mettent un certain temps à se déclencher 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 le susmentionné les gestionnaires d'événements il suffit d'insérer le code suivant dans le fichier - de votre document. <body> - étiquette.
<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 la plupart des navigateurs actuels).
document.onload événement.onload se déclenche deux fois lorsqu'il est déclaré à l'intérieur de l'élément <body> une fois lorsqu'il est déclaré à l'intérieur de l'élément <head> (où l'événement fait alors office de document.onload ).window.onload dans les limites du code HTML. <head> élément.►Exemple de projet :
Le code ci-dessus est extrait de de ce projet codebase ( index.html y keyboarder.js ).
Pour une liste de les gestionnaires d'événements de l'objet fenêtre veuillez vous reporter à la documentation MDN.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
La documentation du MDN les explique
windowévénements :onloadyDOMContentLoaded. Exemple d'utilisation : ,window.addEventListener('DOMContentLoaded', callback). À partir de mi 2019, compatible avec tous les principaux navigateurs. ----- developer.mozilla.org/fr/US/docs/Web/API/Window/ ------ developer.mozilla.org/fr/US/docs/Web/API/Window/load_event0 votes
Pour moi encore, dans Firefox 75.0 aujourd'hui,
window.onloadydocument.onloadson différents l'un de l'autre !window.onloadsemble avoir lieu après et est un peu plus chargée quedocument.onload! (Certaines choses fonctionnent avec la fenêtre qui ne fonctionnent pas avec le document ! Cela vaut également pour document.onreadstatechange 'complete').