1. La méthode d'intégration de Javascript dans HTML consiste à placer directement le code Javascript entre la paire de balises <script> et </script>. Utilisez l'attribut src de la balise <script /> pour formuler un fichier js externe et le placer dans. le gestionnaire d'événements, tel que : <p onclick="alert('Je suis le Javascript exécuté par l'événement onclick')">Cliquez sur moi</p>
Comme corps de l'URL, cette URL utilise le protocole Javascript: spécial, tel que : <a href="javascript:alert('Je suis un javascript exécuté par le protocole javascript:')">Cliquez-moi</a>
Utilisez la méthode document.write() de javascript lui-même pour écrire un nouveau code javascript. Utilisez Ajax pour obtenir le code javascript de manière asynchrone, puis exécutez
les 3e et 4e méthodes. Le Javascript écrit doit être déclenché avant de pouvoir être exécuté, donc à moins que. il est spécialement défini, la page est chargée ne sera pas exécutée.
2. L'ordre d'exécution de Javascript sur la page. Le code Javascript sur la page fait partie du document HTML, donc l'ordre dans lequel Javascript est exécuté lors du chargement de la page est l'ordre dans lequel la balise d'introduction <script /> apparaît. . Dans la balise <script /> ou via src Le JS externe importé est exécuté dans l'ordre dans lequel ses instructions apparaissent, et le processus d'exécution fait partie du chargement du document.
Les variables globales et fonctions définies par chaque script peuvent être appelées par des scripts exécutés ultérieurement.
L'appel de variable doit avoir été déclaré précédemment, sinon la valeur de variable obtenue sera indéfinie.
<script type="text/javscrpt">//<![CDATA[
alert(tmp); //sortie non définie
vartmp = 1 ;
alerte(tmp); //sortie 1
//]]></script>
Dans le même script, la définition de la fonction peut apparaître après l'appel de la fonction. Cependant, si elle est dans deux morceaux de code et que l'appel de la fonction est dans le premier morceau de code, une erreur de fonction non définie sera signalée.
<script type="text/javscrpt">//<![CDATA[
aa(); //Erreur du navigateur
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //Sortie 1
fonction aa(){alerte(1);}
//]]></script>
document.write() écrira la sortie à l'emplacement du document de script. Une fois que le navigateur aura analysé le contenu du document où se trouve documemt.write(), il continuera à analyser le contenu généré par document.write(), puis continuez à analyser le document HTML.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("Je suis" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alerte(3);
//]]></script>
Le contenu de test.js est :
var tmpStr = 1 ;
alerte(tmpStr);
L'ordre des valeurs des popups dans Firefox et Opera est : 1, 2, je suis 1, 3
L'ordre des valeurs contextuelles dans IE est : 2, 1, 3. En même temps, le navigateur signale une erreur : tmpStr n'est pas défini. La raison peut être qu'IE n'attend pas le code Javascript dans SRC. être chargé avant d'exécuter la ligne suivante lorsque document.write. Par conséquent, 2 apparaît en premier, et lorsque document.write('document.write("I am" + tmpStr)') est exécuté et que tmpStr est appelé, tmpStr n'est pas défini. , ce qui entraîne une erreur.
Pour résoudre ce problème, vous pouvez utiliser le principe de l'analyse HTML pour analyser une balise HTML puis exécuter la suivante, et diviser le code pour y parvenir :
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("Je suis" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alerte(3);
//]]></script>
De cette façon, l'ordre des valeurs de sortie sous IE et les autres navigateurs est cohérent : 1, 2, je suis 1, 3.
3. Comment modifier l'ordre d'exécution de Javascript sur la page à l'aide de onload
<script type="text/javascript">//<![CDATA[
window.onload = f;
fonction f(){alerte(1);}
alerte(2);
//]]></script>
L'ordre des valeurs de sortie est 2, 1.
Il est à noter que s'il existe plusieurs winodws.onload, seul le plus efficace prendra effet. La solution est :
window.onload = function(){f();f1();f2();.... .}
Utilisation des types d'événements DOM de niveau 2
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}autre{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
Defer peut être utilisé dans IE. La fonction de defer est de charger le code et de ne pas l'exécuter immédiatement. Il sera exécuté après le chargement du document. Il est quelque peu similaire à window.onload, mais il n'a pas les limitations de window. .onload Il peut être utilisé à plusieurs reprises, mais uniquement dans Il est valide dans IE, donc l'exemple ci-dessus peut être modifié pour
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("Je suis" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alerte(3);
//]]></script>
De cette façon, IE ne signalera pas d'erreur et l'ordre des valeurs de sortie devient : 1, 3, 2, je suis 1.
Lorsque l'analyseur HTML rencontre un script, il doit terminer l'analyse du document comme d'habitude et attendez que le script s'exécute. Pour résoudre ce problème, la norme HTML4 définit defer. Utilisez defer pour inviter le navigateur à continuer l'analyse du document HTML et à retarder l'exécution du script. Ce délai est très utile lorsqu'un script est chargé à partir d'un fichier externe, afin que le navigateur n'ait pas à attendre que tous les fichiers externes soient chargés avant de poursuivre l'exécution, ce qui peut effectivement améliorer les performances. IE est actuellement le seul navigateur qui prend en charge l'attribut defer, mais IE n'implémente pas correctement l'attribut defer car les scripts retardés sont toujours retardés jusqu'à la fin du document, plutôt que seulement retardés jusqu'au prochain script non retardé. Cela signifie que l'ordre d'exécution des scripts retardés dans IE est assez déroutant et que les fonctions et variables qui ne sont pas requises par les scripts non retardés suivants ne peuvent pas être définies. Le temps d'exécution de tous les scripts de report dans IE doit être après l'établissement de l'arborescence du document HTML et avant window.onload.
Profitez de l'Ajax.
Étant donné que xmlhttpRequest peut déterminer l'état de chargement des documents externes, il peut modifier l'ordre de chargement du code.