Summary of methods for dynamically loading js_javascript skills-JS Tutorial-php.cn

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: Document.write(" "); 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: xx.src="test.js" 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: var body= document.getElementsByTagName('BODY').[0]; var script= document.createElement("script"); Script.type = "text/javascript"; Script.src="xx.js"; body.appendChild( oScript); 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 tag that needs to be set * @param url Relative path or absolute path of js file */ loadJs:function(id,url){ var xmlHttp = null; if(window.ActiveXObject){//IE try { //Can be used in IE6 and later versions xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { //IE5.5 and later versions can be used xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }else if(window.XMLHttpRequest){ //Firefox, Opera 8.0, Safari, Chrome xmlHttp = new XMLHttpRequest(); } //Adopt synchronous loading xmlHttp.open("GET",url,false); //Send synchronous request, //If the browser is Chrome or Opera, it must be released before it can run, otherwise an error will be reported xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ //4 means the data has been sent if(xmlHttp.readyState == 4){ //0 is the local area being accessed, 200 to 300 represents successful access to the server, //304 means the cache is accessed without modification If((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "script" ); myScript.language = "javascript"; myScript.type = "text/javascript"; myScript.id = id; try{ //IE8 and below do not support this method and need to be set through the text attribute myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }catch (ex){ myScript.text = xmlHttp.responseText; } myBody.appendChild(myScript); } } } //Use asynchronous loading xmlHttp.open("GET",url,true); xmlHttp.send(null); } 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 설정해야 하는 태그의 ID * @param url js 파일의 상대 경로 또는 절대 경로 * @return {Boolean} 로딩 성공 여부를 반환합니다. true는 성공, false는 실패를 나타냅니다. */ loadJs:function(id,url){ var xmlHttp = null if(window.ActiveXObject){//IE { 을 시도해 보세요. //IE6 이상 버전에서 사용 가능 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") } 잡기 (e) { //IE5.5 이상 버전 사용 가능 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") } }else if(window.XMLHttpRequest){ //파이어폭스, 오페라 8.0, 사파리, 크롬 xmlHttp = 새로운 XMLHttpRequest() } //동기 로딩 사용 xmlHttp.open("GET",url,false) //동기 요청을 보냅니다. 브라우저가 Chrome 또는 Opera인 경우 실행하기 전에 게시해야 합니다. 그렇지 않으면 오류가 보고됩니다. xmlHttp.send(널) //4는 데이터가 전송되었음을 의미합니다. if(xmlHttp.readyState == 4){ //0은 로컬 액세스, 200~300은 서버 액세스 성공, 304는 수정 없이 캐시 액세스 If((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0] var myScript = document.createElement( "script" ); myScript.언어 = "자바스크립트" myScript.type = "텍스트/자바스크립트" myScript.id = 아이디 시도해 보세요{ //IE8 이하는 이 방식을 지원하지 않으므로 text 속성으로 설정해야 합니다. myScript.appendChild(document.createTextNode(xmlHttp.responseText)) }잡다(예){ myScript.text = xmlHttp.responseText } myBody.appendChild(myScript) true를 반환합니다. }그밖에{ 거짓 반환 } }그밖에{ 거짓 반환 } } 이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Summary of methods for dynamically loading js_javascript skills