Zusammenfassung von drei Möglichkeiten zum dynamischen Laden von JS-Dateien

Dieses Mal werde ich Ihnen eine Zusammenfassung der drei Möglichkeiten zum dynamischen Laden von JS-Dateien geben sehen.

1. Verwenden Sie die Methode

document.write/writeln() Diese Methode kann das dynamische Laden von js-Dateien realisieren Um den JS-Dateifluss neu zu laden, führt diese Methode dazu, dass die gesamte Seite neu gezeichnet wird.

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

Zu beachten ist das Escapezeichen des

Sonderzeichens

.

2. Verwenden Sie jQuery

Verwenden Sie die Methode getScript(url, callback), um JS-Dateien dynamisch zu laden

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

3 Methode

Prinzip: Erstellen Sie dynamisch ein Skript-Tag und geben Sie das src-Attribut des Skripts an

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');
 });

Sie können dasselbe Prinzip auch verwenden, um CSS-Dateien dynamisch zu laden, mit der Ausnahme, dass das übergeordnete Element eingefügt wird Knoten ist Kopfbezeichnung.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Berechnung von Vue.js und der Verwendung von Listener-Eigenschaften

Laden von jquery.js in JS Ausführliche Erläuterung der Methode

Das obige ist der detaillierte Inhalt vonZusammenfassung von drei Möglichkeiten zum dynamischen Laden von JS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!