de la fenêtre.onload dans le script externe est ignorée en Javascript

index.html

<html>
<head>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript">
window.onload = function() {
    console.log("hello from html");
};
</script>
</head>
<body>
<div class="bar">bar</div>
</body>
</html>

foo.js

//this js file will be completely ignored with window.onload
//window.onload = function() {

    console.log("hello from external js");

    var bar = document.getElementsByClassName("bar");

    //this returns 0 instead of 1
    console.log(bar.length);
//};
  1. Quand window.onload est utilisé en html, window.onload de js externe sera ignoré.
  2. Quand window.onload de js externe est commenté, bar.length renvoie 0.
  3. Quand window.onload de html est supprimé, window.onload de js externe fonctionne très bien.

Quelqu'un peut-il expliquer pourquoi je ne peux pas utiliser les deux window.onload?

Si je avait à utilisation window.onload en html, comment faire pour savoir si la fenêtre est chargé de js externe?

Pourquoi ne pas vous essayez d'utiliser un autre texte en fonction d'alerte pour le fichier js externe, pour voir où il chargé?

OriginalL'auteur user1643156 | 2013-04-01

  1. 8

    1)La façon dont vous êtes en liaison, vous pouvez avoir qu'une seule méthode attachée à un événement. Vous avez besoin d'ajouter un écouteur d'événement pour ce que vous voulez. 

    window.addEventListener("load", function() { alert("hello!");});

    Paramètre directement une méthode à l'événement onload remplacera celle précédemment attaché méthode. Mais si vous utilisez des écouteurs au lieu de cela, vous pouvez avoir beaucoup d'entre eux lié à un événement.

    2)Si vous commentez le onload dans votre fichier externe, lorsque le document.getElementsByClassName("bar") est appelée, votre document n'est pas encore prêt, alors il sera de retour 0 articles.

    3)Utilisez la méthode addEventListener comme je l'ai expliqué dans le premier point. Si vous appliquez ce dans les deux endroits, il fonctionnera comme un charme.

    J'ai remplacé window.onload avec window.addEventListener dans le js externe, comme vous l'avez dit, il fonctionne comme un charme. Je vous remercie.

    OriginalL'auteur Alcides Queiroz Aguiar

  2. 1

    onload est une propriété de la fenêtre. Il agit comme n'importe quelle autre variable de la propriété. Lorsque vous essayez de l'utiliser deux fois vous êtes remplacer la valeur d'origine avec votre deuxième écrire.

    Pour que toute votre script externe est ignoré lorsque vous l'envelopper dans window.onload, parce que window.onload est ensuite écrasé à 

    function() {
    console.log("hello from html");
};

    Si vous voulez faire exécuter 2 fonctions, de définir les 2 fonctions, a et b,

    et définir window.onload comme ceci:

    window.onload = function(){
  a();
  b();
}

    Alternativement, vous pouvez lier des 2 événements séparés dans la façon dont les Alcides réponse suggère. Mon avis personnel est que sa propre à faire un seul lier avec de multiples fonctions depuis son plus facile de savoir ce qui est lié, à savoir ce que l'ordre de vos fonctions exécuter, et de voir ce qui se passe dans un seul endroit, mais il est surtout une question de style ou de préférence si l'ordre n'a pas d'importance.

    OriginalL'auteur Ben McCormick

  3. 0

    C'est Correct, vous écrasez votre propre onload, mais vous pouvez toujours joindre un nouvel écouteur d'événement à la fenêtre comme ceci

    function onLoadHandler(){
console.log("hello from external js");

var bar = document.getElementsByClassName("bar");

//page not loaded, so this returns 0 instead of 1
console.log(bar.length);
}
if (window.addEventListener) {
window.addEventListener('load', onLoadHandler); }
 else if (window.attachEvent) { window.attachEvent('onload', onLoadHandler ); }
    Merci pour le rappel de la croix-navigateur écouteur d'événement.

    OriginalL'auteur user1549458