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

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

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

코드 복사 코드는 다음과 같습니다. Document.write(" ");

이 방법은 비동기 로딩이므로 document.write가 인터페이스를 다시 작성하므로 이는 분명히 실용적이지 않습니다 방법 2: 기존 스크립트의 src 속성을 동적으로 변경(비동기)

코드 복사 코드는 다음과 같습니다. &lt ;/스크립트&gt ; xx.src="test.js"

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

코드 복사 코드는 다음과 같습니다. 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 설정해야 하는 태그의 ID * @param url js 파일의 상대 경로 또는 절대 경로 */ 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(널) xmlHttp.onreadystatechange = function(){ //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) } } } //비동기 로딩 사용 xmlHttp.open("GET",url,true) xmlHttp.send(널) } open에서 false로 설정하면 동기 로딩에 onreadystatechange 이벤트 설정이 필요하지 않습니다.

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

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

코드 복사 코드는 다음과 같습니다. /** * 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 프로그래밍 설계에 도움이 되기를 바랍니다.