Summary of methods for dynamically loading js_javascript skills

The examples in this article summarize the methods of dynamically loading js. Share it with everyone for your reference. The details are as follows:

Method 1: Direct document.write (asynchronous)

Copy code The code is as follows:

");

Since this method is asynchronous loading, document.write will rewrite the interface, which is obviously not practical
Method 2: Dynamically change the src attribute of an existing script (asynchronous)

Copy code The code is as follows:

> ;

This method will not change the interface elements or rewrite the interface elements, but it will also be loaded asynchronously
Method 3: Dynamically create script elements (asynchronous)

Copy code The code is as follows:

<script><br /> var body= document.getElementsByTagName('BODY').[0]; <br /> var script= document.createElement("script"); <br /> Script.type = "text/javascript"; <br /> Script.src="xx.js"; <br /> body.appendChild( oScript); <br /> </script>

The advantage of this method compared to the second method is that there is no need to write a script tag in the interface at the beginning. The disadvantage is asynchronous loading

Method 4: XMLHttpRequest/ActiveXObject loading (asynchronous)

Copy code The code is as follows:

/**
* Load js script asynchronously
* @param id The id of the <script> tag that needs to be set <br /> * @param url Relative path or absolute path of js file <br />*/ <br /> loadJs:function(id,url){ <br />                              <br /> var xmlHttp = null; <br /> if(window.ActiveXObject){//IE <br /> try { <br /> //Can be used in IE6 and later versions <br /> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); <br /> } catch (e) { <br /> //IE5.5 and later versions can be used <br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); <br /> } <br /> }else if(window.XMLHttpRequest){ <br /> //Firefox, Opera 8.0, Safari, Chrome <br /> xmlHttp = new XMLHttpRequest(); <br /> } <br /> //Adopt synchronous loading <br /> xmlHttp.open("GET",url,false); <br /> //Send synchronous request, <br /> //If the browser is Chrome or Opera, it must be released before it can run, otherwise an error will be reported <br /> xmlHttp.send(null); <br /> xmlHttp.onreadystatechange = function(){ <br /> //4 means the data has been sent <br /> if(xmlHttp.readyState == 4){ <br /> //0 is the local area being accessed, 200 to 300 represents successful access to the server, <br /> //304 means the cache is accessed without modification <br /> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br /> var myBody = document.getElementsByTagName("BODY")[0]; <br /> var myScript = document.createElement( "script" ); <br /> myScript.language = "javascript"; <br /> myScript.type = "text/javascript"; <br /> myScript.id = id; <br /> try{ <br /> //IE8 and below do not support this method and need to be set through the text attribute <br /> myScript.appendChild(document.createTextNode(xmlHttp.responseText)); <br /> }catch (ex){ <br /> myScript.text = xmlHttp.responseText; <br /> }  <br /> myBody.appendChild(myScript); <br /> }  <br /> } <br /> } <br /> //Use asynchronous loading <br /> xmlHttp.open("GET",url,true); <br /> xmlHttp.send(null); <br /> }</script>

Setting it to false in open means synchronous loading. Synchronous loading does not require setting the onreadystatechange event

These four methods are all executed asynchronously, that is, while loading these scripts, the scripts on the main page continue to run.

Method 5: XMLHttpRequest/ActiveXObject loading (synchronization)

Copy code The code is as follows:

/**
* js 스크립트를 동기적으로 로드
* @param id 설정해야 하는 <script> 태그의 ID <br /> * @param url js 파일의 상대 경로 또는 절대 경로 <br /> * @return {Boolean} 로딩 성공 여부를 반환합니다. true는 성공, false는 실패를 나타냅니다. <br />*/ <br /> loadJs:function(id,url){ <br />  <br /> var xmlHttp = null <br /> if(window.ActiveXObject){//IE <br /> {<br />을 시도해 보세요. //IE6 이상 버전에서 사용 가능 <br /> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") <br /> } 잡기 (e) { <br /> //IE5.5 이상 버전 사용 가능<br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") <br /> }  <br /> }else if(window.XMLHttpRequest){ <br /> //파이어폭스, 오페라 8.0, 사파리, 크롬 <br /> xmlHttp = 새로운 XMLHttpRequest() <br /> } <br /> //동기 로딩 사용 <br /> xmlHttp.open("GET",url,false) <br /> //동기 요청을 보냅니다. 브라우저가 Chrome 또는 Opera인 경우 실행하기 전에 게시해야 합니다. 그렇지 않으면 오류가 보고됩니다. <br /> xmlHttp.send(널) <br /> //4는 데이터가 전송되었음을 의미합니다. <br /> if(xmlHttp.readyState == 4){ <br /> //0은 로컬 액세스, 200~300은 서버 액세스 성공, 304는 수정 없이 캐시 액세스 <br /> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br /> var myBody = document.getElementsByTagName("BODY")[0] <br /> var myScript = document.createElement( "script" ); myScript.언어 = "자바스크립트" <br /> myScript.type = "텍스트/자바스크립트" <br /> myScript.id = 아이디 <br /> 시도해 보세요{ <br /> //IE8 이하는 이 방식을 지원하지 않으므로 text 속성으로 설정해야 합니다. <br /> myScript.appendChild(document.createTextNode(xmlHttp.responseText)) <br /> }잡다(예){ <br /> myScript.text = xmlHttp.responseText <br /> }  <br /> myBody.appendChild(myScript) <br /> true를 반환합니다. <br /> }그밖에{ <br /> 거짓 반환 <br /> }  <br /> }그밖에{ <br /> 거짓 반환 <br /> } <br /> }<br /></script>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.