3 façons de charger dynamiquement des fichiers JS

Cette fois, je vais vous présenter 3 façons de charger dynamiquement des fichiers JS Quelles sont les précautions pour charger dynamiquement des fichiers JS. Voici des cas pratiques, jetons un coup d'oeil.

1. Utilisez la méthode document.write/writeln()

Cette méthode peut réaliser le chargement dynamique des fichiers js. pour recharger le fichier js. Écrire le flux de documents, cette méthode entraînera le redessin de la page entière.

Méthode de mise en œuvre :

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

Ce qu'il faut noter, c'est l'échappement du caractère spécial .

2. Utilisez jQuery

Utilisez la méthode getScript(url, callback) pour charger dynamiquement les fichiers js

$.getScript('test.js',function(){
 alert('done');
});

3. Méthode js native

Principe : créer dynamiquement une balise de script et spécifier l'attribut src du script

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

Vous pouvez également utiliser le même principe pour charger dynamiquement des fichiers css, sauf que le nœud parent inséré est la balise head.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment introduire dynamiquement des fichiers JS

Un résumé de la façon d'utiliser les attributs data-* dans H5

Comment implémenter la synchronisation JS, le chargement asynchrone et paresseux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!