Heim > Artikel > Web-Frontend > Zusammenfassung von vier Methoden zur dynamischen Einführung von js

Zusammenfassung von vier Methoden zur dynamischen Einführung von js

php中世界最好的语言Original: 2018-05-12 14:16:101846Durchsuche

Dieses Mal werde ich Ihnen eine Zusammenfassung der vier Methoden zur dynamischen Einführung von js geben. Für die vier Methoden zur dynamischen Einführung von js .

index.html

<html> 
 <head> 
 <meta content="text/html;charset=utf-8" http-equiv="content-type"> 
 <title> </title> 
 <script src=&#39;&#39; id="s1"></script> 
 <script src="dynamic.js"></script> 
 </head> 
 <body> 
 </body> 
</html>

test.js

alert("hello! I am test.js"); 
var str="1";

dynamic.js

//第一种方式：直接document.write 但这样会把当前的页面全覆写掉 
//document.write("<script src=&#39;test.js&#39;><\/script>"); 
//第二种方式:动态改变已有script的src属性 
//s1.src="test.js" 
//第三种方式：动态创建script元素 
/* var oHead = document.getElementsByTagName('HEAD').item(0); 
 var oScript= document.createElement("script"); 
 oScript.type = "text/javascript"; 
 oScript.src="test.js"; 
 oHead.appendChild(oScript); 
*/ 
//其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~ 
//alert(str); 
/*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走， 
如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing.... 
那么第四种就是基于ajax请求的,且是推荐
*/ 
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) 
 { 
 includeJS( sId, url, oXmlHttp.responseText ); 
 } 
 } 
 oXmlHttp.open('GET', url, false);//同步操作 
 oXmlHttp.send(null); 
} 
 
function includeJS(sId, fileUrl, source) 
{ 
 if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
 var oHead = document.getElementsByTagName('HEAD').item(0); 
 var oScript = document.createElement( "script" ); 
 oScript.type = "text/javascript"; 
 oScript.id = sId; 
 oScript.text = source; 
 oHead.appendChild( oScript ); 
 } 
} 
ajaxPage( "scrA", "test.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str );

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:

Analyse des Vue-Datenreaktionsprinzips

Detaillierte Erläuterung der Schritte zur Kapselung von React Form-Komponenten

Das obige ist der detaillierte Inhalt vonZusammenfassung von vier Methoden zur dynamischen Einführung von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Zusammenfassung der Vor- und Nachteile der drei Aufrufmethoden von jsNächster Artikel：Zusammenfassung der Vor- und Nachteile der drei Aufrufmethoden von js

In Verbindung stehende Artikel

Mehr sehen