code exécuté lorsque la page est
prêts
Si vous essayez d'exécuter le code JavaScript qui manipule certains éléments de la page Web sans s'être assuré que si les éléments sont chargés complètement entraînera des résultats inattendus. Par exemple, il est un élément de P dont l'ID est "highlight" pendant le chargement de la page que vous souhaitez appliquer une couleur de fond sur l'élément. Dans une solution typique utilisant générique JavaScript que vous aller pour quelque chose comme ce qui suit:
var highlightDiv = document.getElementById ("highlight"); if (typeof highlightDiv === "objet") {highlightDiv.style. backgroundColor = "yellow"; highlightDiv.style.color = "blue"; highlightDiv.style.border = "red 1px solid";}
Dans le code ci-dessus nous avons appliqué une couleur de fond, une bordure de 1px de couleur rouge et fait la couleur bleue de la police. S'il vous plaît noter que nous ne devons pas le faire comme ceci à la place, nous pouvons créer une classe avec une couleur de fond jaune, 1px frontière en rouge et en bleu la couleur et appliquer tout simplement la classe.
Mais je veux juste montrer le point que je veux parler.
Supposons que vous exécutez le morceau de code ci-dessus avant les charges d'éléments dans le navigateur. Comme vous avez pensé de ce code ne fonctionne pas comme prévu et sauter l'exécution requise. L'approche commune est que vous placez le code après l'élément div sur lequel il va effectuer l'opération.
Un autre problème le plus courant soit jusqu'à IE8 était la erreurs "Opération annulée". Dans cette erreur un élément enfant tente de mettre à jour son parent avant l'élément parent se charge complètement dans le DOM.
Par exemple le script tente d'insérer un nouvel élément dans l'élément de corps avant charges de corps dans les DOM complètement.
Ceci est l'endroit où l'événement onload de l'objet de la fenêtre est très utile. Permet d'examiner un morceau de code de l'échantillon:
window.onload = function () {var d = document.createElement ("div"); d = "Test Data"; document.body.appendChild (d);}Le code ci-dessus est parfait et sera exécuté après le DOM le chargement terminé.
Tout va bien?
Non, il ya encore quelques problèmes dans cette approche