onload à partir du fichier js externe

Question

J'écris un script js que les gens vont ajouter à leur site web en ajoutant une seule ligne de code à l'en-tête ou à la fin de la partie du corps de leur HTML.

Ma question est comment faire le droit onload sur le fichier js externe. Est-ce que le code ci-dessous fonctionnera? Ne peut-il pas courir après le chargement du document et manquer l'événement onload?

function c_onload() { alert ('onload'); } 

if (window.attachEvent) {window.attachEvent('onload', c_onload);} 
else if (window.addEventListener) {window.addEventListener('load', c_onload, false);} 
else {document.addEventListener('load', c_onload, false);} 

(je ne peux pas utiliser Jquery ou toute autre bibliothèque)

Answer 1

Je crains que si vous ne pouvez pas utiliser jQuery ou une autre bibliothèque, vous devez reproduire une manière bonne partie de leurs fonctionnalités. La raison en est que les navigateurs gèrent différemment l'événement onLoad.

Je vous recommande de télécharger le code de jQuery et de voir comment la fonction documentready est implémentée.

Answer 2

L'événement onLoad est censé être exécuté lorsque l'élément il est attaché à est chargé. Mais certains navigateurs * l'interprètent comme "beforeload" ou "parfois pendant le chargement", donc l'option la plus sûre pour s'assurer que quelque chose est lancé après que tout html soit chargé, est d'ajouter un appel à la fonction au bas de la source HTML, comme ceci :

... 
     <script type="text/javascript"> 
      c_onload(); 
     </script> 
    </body> 
</html> 

(* au moins certaines versions de Safari pour Windows Je ne beleave ont ce problème)

Answer 3

Quel est votre dernier else -clause

else {document.addEventListener('load', c_onload, false); 

pour? C'est plutôt inutile, imho.

Ce qui suit doit être une solution multi-navigateur: Il vérifie d'abord pour addEventListener(), puis attachEvent() et retombe à onload = ...

function chain(f1, f2) { 
    return typeof f1 !== 'function' ? f2 : function() { 
     var r1 = f1.apply(this, arguments), 
      r2 = f2.apply(this, arguments); 
     return typeof r1 === 'undefined' ? r2 : (r1 && r2); 
    }; 
} 

function addOnloadListener(func) { 
    if(window.addEventListener) 
     window.addEventListener('load', func, false); 
    else if(window.attachEvent) 
     window.attachEvent('onload', func); 
    else window.onload = chain(window.onload, func); 
} 

En outre, ce kgiannakakis a déclaré

La raison est que les navigateurs gérer l'événement onLoad différemment.

est pas vrai: tous les principaux navigateurs gèrent window.onload la même manière, à savoir la fonction d'écouteur est exécuté après que les ressources externes - y compris votre script externe - ont été chargées. Le problème réside avec DOMContentLoaded - c'est là que les hacks avec doScroll(), defer, onreadystatechange et tout ce que quelqu'un d'autre est venu jouer. En fonction de votre public cible, vous pouvez choisir de supprimer le code de remplacement ou même de l'utiliser exclusivement. Mon vote irait pour le laisser tomber.