Dois-je utiliser window.onload ou un bloc de script ?

Question

J'ai une fonction javascript qui manipule le DOM lorsqu'il est appelé (ajoute des classes CSS, etc.).Ceci est invoqué lorsque l'utilisateur modifie certaines valeurs dans un formulaire.Lors du premier chargement du document, je souhaite appeler cette fonction pour préparer l'état initial (ce qui est plus simple dans ce cas que de configurer le DOM côté serveur vers l'état initial correct).

Est-il préférable d'utiliser window.onload pour effectuer cette fonctionnalité ou d'avoir un bloc de script après les éléments DOM que je dois modifier ?Dans les deux cas, pourquoi est-ce mieux ?

Par exemple:

function updateDOM(id) {
    // updates the id element based on form state
}

dois-je l'invoquer via :

window.onload = function() { updateDOM("myElement"); };

ou:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

La première semble être la manière standard de le faire, mais la seconde semble être tout aussi bonne, peut-être meilleure, car elle mettra à jour l'élément dès que le script est exécuté, et tant qu'il est placé après l'élément, je je n'y vois pas de problème.

Des pensées?Une version est-elle vraiment meilleure que l’autre ?

Answer 1

Utiliser certainement onload.Gardez vos scripts séparés de votre page, sinon vous deviendrez fou en essayant de les démêler plus tard.

Answer 2

L'événement onload est considéré comme la bonne façon de le faire, mais si cela ne vous dérange pas d'utiliser une bibliothèque javascript, $(document).ready() de jQuery est encore meilleur.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

Les avantages sont :

1. Appelez $(document).ready() autant de fois que vous le souhaitez pour enregistrer du code supplémentaire à exécuter - vous ne pouvez définir window.onload qu'une seule fois.
2. Les actions $(document).ready() se produisent dès que le DOM est terminé - window.onload doit attendre les images et autres.

J'espère que je ne deviens pas le gars qui suggère jQuery sur chaque question JavaScript, mais c'est vraiment génial.

Answer 3

J'ai écrit beaucoup de Javascript et window.onload est un terrible façon de le faire.Il est fragile et attend chaque l'actif de la page a été chargé.Ainsi, si une image prend une éternité ou si une ressource n'expire pas avant 30 secondes, votre code ne s'exécutera pas avant que l'utilisateur puisse voir/manipuler la page.

De plus, si un autre élément Javascript décide d'utiliser window.onload = function() {}, votre code sera époustouflé.

La bonne façon d'exécuter votre code lorsque la page est prête est d'attendre que l'élément que vous devez modifier soit prêt/disponible.De nombreuses bibliothèques JS disposent de cette fonctionnalité intégrée.

Vérifier:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 4

Certains frameworks JavaScript, tels que mootools, vous donnent accès à un événement spécial nommé "domready" :

Contient la fenêtre Event 'domready', qui s'exécutera une fois le DOM chargé.Pour garantir que les éléments DOM existent lorsque le code tentant d'y accéder est exécuté, ils doivent être placés dans l'événement 'domready'.

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

window.onload sur IE attend également que les informations binaires se chargent.Ce n'est pas une définition stricte de "quand le DOM est chargé".Il peut donc y avoir un décalage important entre le moment où la page est perçue comme chargée et le moment où votre script est lancé.Pour cette raison, je vous recommande d'examiner l'un des nombreux frameworks JS (prototype/jQuery) pour gérer le gros du travail à votre place.

Answer 6

Voici un très bon article sur ce sujet :

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

@Le geek

Je suis presque sûr que window.onload sera rappelé lorsqu'un utilisateur appuie sur le bouton Précédent dans IE, mais ne sera pas rappelé dans Firefox.(À moins qu'ils ne l'aient changé récemment).

Dans Firefox, onload est appelé lorsque le DOM a fini de se charger, quelle que soit la façon dont vous avez accédé à une page.

Answer 8

Bien que je sois d'accord avec les autres sur l'utilisation de window.onload si possible pour un code propre, je suis presque sûr que window.onload sera rappelé lorsqu'un utilisateur appuie sur le bouton de retour dans IE, mais ne sera plus appelé dans Firefox.(À moins qu'ils ne l'aient changé récemment).

Modifier:Je pourrais avoir ça à l'envers.

Dans certains cas, il est nécessaire d'utiliser un script en ligne lorsque vous souhaitez que votre script soit évalué lorsque l'utilisateur clique sur le bouton Précédent depuis une autre page, pour revenir à votre page.

Toute correction ou ajout à cette réponse est la bienvenue...Je ne suis pas un expert en javascript.

Answer 9

Mon point de vue est le premier car vous ne pouvez avoir qu'une seule fonction window.onload, tandis que les blocs de script en ligne ont un n nombre.

Answer 10

onLoad car il est beaucoup plus facile de savoir quel code s'exécute lorsque la page se charge que de devoir lire des tonnes de code HTML à la recherche de balises de script susceptibles de s'exécuter.