일반적으로 필요한 모든 JavaScript 코드가 한 번에로드되면 초기 웹 페이지는 속도가 느려지지만 많은로드 된 코드를 사용할 필요는 없으며이 불필요한 성능 폐기물을 피해야합니다. JavaScript 코드를 동적으로로드하려면 DOM 모델을 사용하여 HTML 문서에 <cript> 노드를 추가하고 동적으로로드 해야하는 JavaScript 코드 에이 노드의 SRC 속성 (즉, 아웃 리치 JavaScript 파일)을 설정할 수 있습니다.
다음은 이러한 기능을 완료하는 예입니다.
(1) 새 JSloaderTest.html 파일을 만듭니다
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"/> <title> gb2312 "/> <title> 수요에 대한 Javascript 코드를로드하는 Javascript 코드를로드합니다. jsloader () {this.load = function (url) {// 모든 get <cript> tags var ss = document.getElementsByTagName ( "script"); // 지정된 파일이 포함되어 있는지 테스트합니다. 포함 된 경우 onsuccess 이벤트를 트리거하고 (i = 0; i <ss.length; i ++) {if (if [i] .src && ss [i] .src.indexof (url)! = -1) {this.onsuccess (); 반품; }} // 스크립트 노드 생성 및 해당 속성을 아웃 리치 JavaScript 파일에 설정합니다. s = document.createElement ( "스크립트"); s.type = "Text/JavaScript"; s.src = URL; // 헤드 노드를 가져 와서 <cript>에 var head = document.getElementsByTagName ( "head") [0]; Head.appendChild (들); // 자신의 참조를 얻습니다 var self = this; // IE 브라우저의 경우 readyStateChange 이벤트를 사용하여 부하가 성공했는지 여부를 결정하십시오. // 다른 브라우저의 경우 부하가 성공했는지 여부를 사용하여 // S.onload = S.onReadingStateChange = function () {S.onReadingStateChange = S.onReadyStateChange = Function () {//이 기능을 사용하지 않아야합니다. onsuccess 이벤트, 아래에서 동일합니다. if (this.readystate && this.readystate == "loading") 리턴; self.onsuccess (); } s.onerror = function () {head.removechild (s); self.onfailure (); }}; // 하중 성공 이벤트 정의 this.onsuccess = function () {}; // 실패한 이벤트 정의 this.onFailure = function () {}; } function btnclick () {// 개체 생성 var jsloader = new jsloader (); //로드 성공 핸들러 정의 jsloader.onsuccess = function () {sayhello (); } //로드 실패 핸들러 정의 jsloader.onfailure = function () {alert ( "파일로드 실패!"); } // JSLOADER.LOAD ( "Hello.js")로드를 시작합니다. } </script> </head> <body> <label> <input type = "제출"이름 = "제출"onclick = "javaScript : btnclick ()"value = "javaScript 파일로드"> </lade> </body> </html>(2) 다음 코드를 포함하여 새로운 hello.js 파일을 만듭니다.
// javaScript 문서 함수 sayhello () {alert ( "Hello World! 성공적으로로드 된 JavaScript 파일"); } // javaScript documentFunction sayhello () {alert ( "Hello World! 성공적으로 JavaScript 파일을로드"); }