Code summary of four commonly used JavaScript dynamic loading methods-JS Tutorial-php.cn

Code summary of four commonly used JavaScript dynamic loading methods

伊谢尔伦

Release： 2017-07-21 15:55:05

Original

2436 people have browsed it

Sometimes we need to dynamically add suitable js, because sometimes we don’t need to load all js in order to improve efficiency. The following are 4 commonly used methods

1. Direct document.write

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

Copy after login

2. Dynamically change the src attribute of an existing script

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

Copy after login

3. Dynamically create script element

<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>

Copy after login

These three methods are executed asynchronously

4. Principle: Use XMLHTTP to obtain the content of the script , and then create a Script object.
Note: a.js must be saved in UTF8 encoding to avoid errors. Because the server and XML use UTF8 encoding to transmit data.
Main page code:

<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>

Copy after login

The dynamic loading of a JS script is now completed.

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();

Copy after login

The above is the detailed content of Code summary of four commonly used JavaScript dynamic loading methods. For more information, please follow other related articles on the PHP Chinese website!