Réponses:
window.onload = myOnloadFuncet <body onload="myOnloadFunc();">sont différentes façons d'utiliser le même événement . L'utilisation window.onloadest cependant moins intrusive - elle supprime votre JavaScript du HTML.
Toutes les bibliothèques JavaScript courantes, Prototype, ExtJS, Dojo, JQuery, YUI, etc. fournissent de jolis wrappers autour des événements qui se produisent lors du chargement du document. Vous pouvez écouter l'événement onLoad de la fenêtre et y réagir, mais onLoad n'est pas déclenché tant que toutes les ressources n'ont pas été téléchargées. Dans certains cas, c'est exactement ce que vous voulez, dans d'autres, vous pourriez trouver que l'écoute lorsque le DOM est prêt est plus appropriée - cet événement est similaire à onLoad mais se déclenche sans attendre le téléchargement des images, etc.
myOnloadFunc()dans le contexte global ( thisse référera à window). Le paramétrer via javascript le fera s'exécuter dans le contexte de l'élément ( thisfait référence à l'élément sur lequel l'événement a été déclenché). Dans ce cas particulier, cela ne fera aucune différence, mais ce sera le cas avec d'autres éléments.
thisvous vous référez si vous le souhaitez.
Il n'y a pas de différence, mais vous ne devez pas non plus l'utiliser.
Dans de nombreux navigateurs, l' window.onloadévénement n'est déclenché qu'une fois toutes les images chargées, ce qui n'est pas ce que vous souhaitez. Les navigateurs basés sur des normes ont un événement appelé DOMContentLoadedqui se déclenche plus tôt, mais il n'est pas pris en charge par IE (au moment d'écrire cette réponse). Je recommanderais d'utiliser une bibliothèque javascript qui prend en charge une fonctionnalité DOMContentLoaded multi-navigateur, ou de trouver une fonction bien écrite que vous pouvez utiliser. jQuery $(document).ready(), est un bon exemple.
window.onloadpeut fonctionner sans corps. Créez une page avec uniquement les balises de script et ouvrez-la dans un navigateur. La page ne contient aucun corps, mais elle fonctionne toujours.
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
<!ELEMENT html (head, body)>[1] - et html401 spécifie également <!ELEMENT HTML O O (%html.content;)avec <!ENTITY % html.content "HEAD, BODY">[2]. html51 indique également le A head element followed by a body element.contenu html. [3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html-élément - Je suppose que toutes ces normes HTML communes / en cours d'utilisation ne nécessitent une étiquette de corps. :)
Start tag: optional, End tag: optional
Je préfère, en général, ne pas utiliser l' <body onload=""événement>. Je pense qu'il est plus propre de séparer autant que possible les comportements du contenu.
Cela dit, il y a des occasions (généralement assez rares pour moi) où l'utilisation de la charge corporelle peut donner une légère augmentation de la vitesse.
J'aime utiliser Prototype donc je mets généralement quelque chose comme ça dans le <head> de ma page:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
ou
Event.observe(window, 'load', function(){
alert('Window onload');
});
Ce qui précède sont des astuces que j'ai apprises ici . J'aime beaucoup le concept d'attacher des gestionnaires d'événements en dehors du HTML.
(Modifier pour corriger une faute d'orthographe dans le code.)
'tant de réponses subjectives à une question objective. JavaScript "discret" est une superstition comme l'ancienne règle de ne jamais utiliser de gotos. Écrivez le code d'une manière qui vous aide à atteindre votre objectif de manière fiable, et non selon les croyances religieuses à la mode de quelqu'un.
Quiconque trouve:
<body onload="body_onload();">être trop distrayant est trop prétentieux et n'a pas ses priorités.
Normalement, je mets mon code JavaScript dans un fichier .js distinct, mais je ne trouve rien de compliqué à accrocher des gestionnaires d'événements en HTML, qui est d'ailleurs du HTML valide.
window.onload- Appelé après tous les fichiers DOM, JS, images, iframes, extensions et autres complètement chargés. Ceci est égal à $ (window) .load (function () {});
body onload=""- Appelé une fois DOM chargé. Ceci est égal à $ (document) .ready (function () {});
readyvs. se déclenche après le chargement de tout le document, y compris tous les scripts, images et feuilles de style. se déclenche après la construction de l'arborescence DOM mais avant les images, etc. Son équivalent est non . onloadloadDOMContentLoadedDOMContentLoadeddocument.readyload
Si vous essayez d'écrire du code JS discret (et vous devriez l'être), vous ne devriez pas l'utiliser <body onload="">.
Je crois comprendre que différents navigateurs traitent ces deux types de façon légèrement différente, mais ils fonctionnent de manière similaire. Dans la plupart des navigateurs, si vous définissez les deux, l'un sera ignoré.
Pensez à la surcharge comme à tout autre attribut. Sur une zone de saisie, par exemple, vous pouvez mettre:
<input id="test1" value="something"/>Ou vous pouvez appeler:
document.getElementById('test1').value = "somethingelse";L'attribut onload fonctionne de la même manière, sauf qu'il prend une fonction comme valeur au lieu d'une chaîne comme le fait l'attribut value. Cela explique également pourquoi vous ne pouvez "utiliser qu'un seul d'entre eux" - l'appel de window.onload réattribue la valeur de l'attribut onload pour la balise body.
De plus, comme d'autres disent ici, il est généralement plus propre de garder le style et le javascript séparés du contenu de la page, c'est pourquoi la plupart des gens conseillent d'utiliser window.onload ou comme la fonction prête de jQuery.
<body onload = ""> devrait remplacer window.onload.
Avec <body onload = "">, document.body.onload peut être nul, non défini ou une fonction selon le navigateur (bien que getAttribute ("onload") devrait être quelque peu cohérent pour obtenir le corps de la fonction anonyme sous forme de chaîne) . Avec window.onload, lorsque vous lui affectez une fonction, window.onload sera une fonction cohérente dans tous les navigateurs. Si cela vous importe, utilisez window.onload.
window.onload est préférable pour séparer le JS de votre contenu de toute façon. Il n'y a pas beaucoup de raisons d'utiliser <body onload = ""> quand vous pouvez utiliser window.onload.
Dans Opera, la cible de l'événement pour window.onload et <body onload = ""> (et même window.addEventListener ("load", func, false)) sera la fenêtre au lieu du document comme dans Safari et Firefox. Mais, «ceci» sera la fenêtre à travers les navigateurs.
Cela signifie que, lorsque cela est important, vous devez envelopper le crud et rendre les choses cohérentes ou utiliser une bibliothèque qui le fait pour vous.
Ils fonctionnent tous les deux de la même façon. Cependant, notez que si les deux sont définis, un seul d'entre eux sera invoqué. J'évite généralement d'utiliser l'un ou l'autre directement. Au lieu de cela, vous pouvez attacher un gestionnaire d'événements à l'événement de chargement. De cette façon, vous pouvez intégrer plus facilement d'autres packages JS qui pourraient également avoir besoin d'attacher un rappel à l'événement onload.
Tout framework JS aura des méthodes multi-navigateurs pour les gestionnaires d'événements.
C'est un standard accepté que le contenu, la mise en page et le comportement soient séparés. Ainsi, window.onload () sera plus approprié à utiliser que <body onload="">si les deux font le même travail.
Désolé pour la réincarnation de ce fil après encore 3 ans de sommeil, mais j'ai peut-être enfin trouvé l'avantage indiscutable de window.onload=fn1;plus <body onload="fn1()">. Cela concerne les modules JS ou ES : lorsque votre onloadgestionnaire réside dans un fichier JS "classique" (c'est-à-dire référencé sans <script type="module" … >, dans les deux cas est possible; lorsque votre onloadgestionnaire réside dans un fichier JS "module" (c'est-à-dire référencé avec <script type="module" … >, le <body onload="fn1()">échouera avec "fn1 () n'est pas défini "erreur. La raison est peut-être que les modules ES ne sont pas chargés avant que HTML soit analysé ... mais c'est juste ma supposition. Quoi qu'il en soit, window.onload=fn1;fonctionne parfaitement avec les modules ...