js_javascript 기술을 동적으로 로드하는 방법 요약

이 기사의 예에는 js를 동적으로 로드하는 방법이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

방법 1: 직접 document.write(비동기)

코드 복사 코드는 다음과 같습니다.

<script> Document.write("<script src='res/extwidget/echarts/xx.js'></script>");

이 방법은 비동기 로딩이므로 document.write가 인터페이스를 다시 작성하므로 이는 분명히 실용적이지 않습니다

방법 2: 기존 스크립트의 src 속성을 동적으로 변경(비동기)

코드 복사 코드는 다음과 같습니다.

이 방법은 인터페이스 요소를 변경하거나 인터페이스 요소를 다시 작성하지 않지만 비동기식으로 로드됩니다 방법 3: 스크립트 요소를 동적으로 생성(비동기)

코드 복사 코드는 다음과 같습니다.<script></script> var body= document.getElementsByTagName('BODY').[0]

var script= document.createElement("script")

Script.type = "텍스트/자바스크립트"
Script.src="xx.js"
body.appendChild(oScript)



두 번째 방법에 비해 이 방법의 장점은 처음에 인터페이스에 스크립트 태그를 작성할 필요가 없다는 점입니다. 단점은 비동기 로딩입니다

방법 4: XMLHttpRequest/ActiveXObject 로드(비동기)

코드 복사 코드는 다음과 같습니다.

/**
* js 스크립트를 비동기식으로 로드
* @param id 설정해야 하는 <script> 태그의 ID <br /> * @param url js 파일의 상대 경로 또는 절대 경로 <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 /> //동기 요청 보내기, <br /> //브라우저가 Chrome이나 Opera인 경우 실행하기 전에 릴리스해야 합니다. 그렇지 않으면 오류가 보고됩니다 <br /> xmlHttp.send(널) <br /> xmlHttp.onreadystatechange = function(){ <br /> //4는 데이터가 전송되었음을 의미합니다. <br /> if(xmlHttp.readyState == 4){ <br /> //0은 접속 중인 로컬 영역, 200~300은 서버 접속 성공을 나타냅니다. <br /> //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 /> }  <br /> } <br /> } <br /> //비동기 로딩 사용 <br /> xmlHttp.open("GET",url,true) <br /> xmlHttp.send(널) <br /> }<br /></script>

open에서 false로 설정하면 동기 로딩에 onreadystatechange 이벤트 설정이 필요하지 않습니다.

이 네 가지 방법은 모두 비동기식으로 실행됩니다. 즉, 이러한 스크립트를 로드하는 동안 기본 페이지의 스크립트가 계속 실행됩니다.

방법 5: XMLHttpRequest/ActiveXObject 로딩(동기화)

코드 복사 코드는 다음과 같습니다.

/**
* 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 프로그래밍 설계에 도움이 되기를 바랍니다.