Heim > Web-Frontend > js-Tutorial > Hauptteil

Codezusammenfassung von vier häufig verwendeten dynamischen JavaScript-Lademethoden

伊谢尔伦
Freigeben: 2017-07-21 15:55:05
Original
2437 Leute haben es durchsucht

Manchmal müssen wir geeignete Js dynamisch hinzufügen, weil wir manchmal nicht alle Js laden müssen, um die Effizienz zu verbessern Die folgenden 4 häufig verwendeten Methoden

1 . Direct document.write

<script language="javascript"> 
document.write("<script src=&#39;test.js&#39;><\/script>"); 
</script>
Nach dem Login kopieren

2. Das src-Attribut eines vorhandenen Skripts dynamisch ändern

<script src=&#39;&#39; id="s1"></script> 
<script language="javascript"> 
s1.src="test.js" 
</script>
Nach dem Login kopieren

3. Dynamisch erstellen Skriptelemente

<script> 
var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="test.js"; 
oHead.appendChild( oScript); 
</script>
Nach dem Login kopieren

Diese drei Methoden werden alle asynchron ausgeführt

4. Prinzip: Verwenden Sie XMLHTTP, um den Inhalt abzurufen erstellt ein Skript und erstellt ein Skriptobjekt.
Hinweis: a.js muss mit UTF8-Kodierung gespeichert werden, um Fehler zu vermeiden. Weil der Server und XML die UTF8-Codierung zum Übertragen von Daten verwenden.
Hauptseitencode:

<script language="JavaScript"> 
function GetHttpRequest() 
{ 
if ( window.XMLHttpRequest ) // Gecko 
return new XMLHttpRequest() ; 
else if ( window.ActiveXObject ) // IE 
return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
function AjaxPage(sId, url){ 
var oXmlHttp = GetHttpRequest() ; 
oXmlHttp.OnReadyStateChange = function() 
{ 
if ( oXmlHttp.readyState == 4 ) 
{ 
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 
{ 
IncludeJS( sId, url, oXmlHttp.responseText ); 
} 
else 
{ 
alert( &#39;XML request error: &#39; + oXmlHttp.statusText + &#39; (&#39; + oXmlHttp.status + &#39;)&#39; ) ; 
} 
} 
} 
oXmlHttp.open(&#39;GET&#39;, url, true); 
oXmlHttp.send(null); 
} 
function IncludeJS(sId, fileUrl, source) 
{ 
if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
var oScript = document.createElement( "script" ); 
oScript.language = "javascript"; 
oScript.type = "text/javascript"; 
oScript.id = sId; 
oScript.defer = true; 
oScript.text = source; 
oHead.appendChild( oScript ); 
} 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量:" + str ); 
</script>
Nach dem Login kopieren

Jetzt ist das dynamische Laden eines JS-Skripts abgeschlossen.

var Rash=true; 
var msg=""; 
function norash() 
{ 
if (confirm("确定要取消吗")) 
Rash=false; 
} 
function rashit() 
{ 
setInterval(&#39;getrss()&#39;,Inttime); 
} 
function getrss() 
{ 
if (Rash==true) 
{ 
head=document.getElementsByTagName(&#39;head&#39;).item(0); 
script=document.createElement(&#39;script&#39;); 
script.src=&#39;INCLUDE/AutoUpdate.asp&#39;; 
script.type=&#39;text/javascript&#39;; 
script.defer=true; 
void(head.appendChild(script)); 
window.status=msg; 
} 
} 
rashit();
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCodezusammenfassung von vier häufig verwendeten dynamischen JavaScript-Lademethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage