페이지에 스크립트를 동적으로 로드하는 방법은 두 가지 정도가 있습니다첫 번째는 ajax를 사용하여 스크립트 파일 코드를 백그라운드에서 포그라운드로 로드한 후 로드된 콘텐츠에 대해 eval()을 통해 코드를 실행하는 것입니다. . 두 번째는 스크립트 태그를 동적으로 생성하고 src 속성을 설정한 다음 스크립트 태그를 페이지 헤드에 삽입하여 js를 로드하는 것입니다. 이는 < /script>에 있지만 이 스크립트 태그는 js를 사용하여 동적으로 생성됩니다. <br> 예를 들어, callbakc.js를 동적으로 로드하려면 다음과 같은 스크립트 태그가 필요합니다. <br></p> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="53030" class="copybut" id="copybut53030" onclick="doCopy('code53030')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code53030"> <br><script type="text/javascript" src="call.js"> ;</script> ; <BR></div> <BR>다음 코드는 js를 통해 이 태그를 생성하고 헤드에 추가하는 방법입니다. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="44744" class="copybut" id="copybut44744" onclick="doCopy('code44744')"><U> 코드 복사</U></a></span> 코드는 다음과 같습니다. </div><div class="codebody" id="code44744"> <BR>var head= document.getElementsByTagName('head')[0] <BR>var script= document.createElement ('스크립트'); <BR>script .type= 'text/javascript'; <BR>script.src= 'call.js' <BR>head.appendChild(script) <BR></div> >call.js가 로드되면 호출되는 메소드입니다. 그러나 header.appendChild(script) 바로 뒤에는 js를 호출할 수 없습니다. 브라우저는 이 js를 비동기적으로 로드하기 때문에 언제 로드가 완료되었는지 알 수 없습니다. 그러나 이벤트를 수신하여 helper.js가 로드되었는지 확인할 수 있습니다. (call.js에 콜백 메소드가 있다고 가정) <BR><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="22717" class="copybut" id="copybut22717" onclick="doCopy('code22717')">코드 복사<U></U></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code22717">var head= document.getElementsByTagName('head')[0]; <BR>var script= document.createElement('script') <BR>script.type= 'text/javascript'; .onreadystatechange= function () { <BR>if (this.readyState == 'complete') <BR>callback() <BR>} <BR>script.onload= function(){ <BR>callback(); <BR>} <BR>script.src= 'helper.js'; <BR>head.appendChild(script); <BR><BR> <BR>onreadystatechange가 사용되기 때문에 2개의 이벤트 수신 기능을 설정했습니다. , 및 gecko 는 웹킷 브라우저와 Opera 모두 onload를 지원합니다. 실제로 this.readyState == 'complete'는 잘 작동하지 않습니다. 이론적으로 상태 변경은 다음과 같습니다. </div>0 초기화되지 않음 <BR>1 로드 <BR>2 로드됨 <BR>3 대화형 <BR>4 완료 <BR>그러나 일부 상태는 건너뜁니다. 경험에 따르면 IE7에서는 로드됨과 완료됨 중 하나만 얻을 수 있지만 둘 다 얻을 수는 없습니다. 그 이유는 상태 변경이 캐시 읽기에 영향을 미치는지 여부에 영향을 미치거나 다른 이유일 수 있기 때문일 수 있습니다. 판단 조건을 this.readyState == 'loaded' || this.readyState == 'complete'로 변경하는 것이 가장 좋습니다. <BR><BR> jQuery 구현을 참고하면, 최종 구현은 다음과 같습니다. <br><br><BR><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="62238" class="copybut" id="copybut62238" onclick="doCopy('code62238')"><U></U> 코드는 다음과 같습니다.</a></span> </div>var head= document.getElementsByTagName('head')[0] ; <div class="codebody" id="code62238">var script= document .createElement('script'); <BR>script.type= 'text/javascript' <BR>script.onload = script.onreadystatechange = function() { <BR>if (! this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { <BR>help() <BR>// IE에서 메모리 누수 처리 <BR> = script.onreadystatechange = null; <BR>} }; <BR>script.src= 'helper.js'; <BR>head.appendChild(script) <BR><BR> <BR> put help() helper.js 끝에 호출을 작성하면 helper.js가 로드된 후 help()가 자동으로 호출될 수 있는지 확인할 수 있습니다. 물론 이것이 적합한지 확인할 수도 있어야 합니다. 귀하의 신청서. </div><BR>또한 참고하세요: <br><br>1. 스크립트 태그의 src는 도메인 전체에 걸쳐 리소스에 액세스할 수 있으므로 이 방법을 사용하면 Ajax를 시뮬레이션하고 Ajax 도메인 간 액세스 문제를 해결할 수 있습니다. <br>2. ajax가 반환한 html 코드에 스크립트가 포함된 경우 innerHTML을 dom에 직접 삽입해도 html의 스크립트가 작동하지 않습니다. jQuery().html(html)의 원본 코드를 대충 살펴본 후 jQuery는 먼저 들어오는 매개변수를 구문 분석하고 스크립트 코드를 제거한 다음 동적으로 스크립트 태그를 생성합니다. dom에 스크립트가 포함되어 있으면 실행 가능합니다. 예: <br><BR><BR><div class="codetitle"><span>코드 복사 <a style="CURSOR: pointer" data="43675" class="copybut" id="copybut43675" onclick="doCopy('code43675')"><U></U> 코드는 다음과 같습니다. </a></span> </div>jQuery("#content" ).html( "<script>alert('aa');")
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
