JS 파일을 동적으로 로드하는 3가지 방법

이번에는 JS 파일을 동적으로 로드하는 3가지 방법을 알려드리겠습니다. JS 파일을 동적으로 로드할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. document.write/writeln() 메소드를 사용하세요.

이 메소드는 js 파일의 동적 로딩을 실현할 수 있습니다. 원칙은 문서 흐름을 다시 작성하는 것입니다.

구현 방법:

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

주의해야 할 것은 특수 문자의 이스케이프입니다.

2. jQuery

getScript(url, callback) 메소드를 사용하여 js 파일을 동적으로 로드하세요

$.getScript('test.js',function(){
 alert('done');
});

3. 기본 js 메소드를 사용하세요

원칙: 스크립트 태그를 동적으로 생성하고 스크립트의 src 속성을 지정하세요.

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

삽입된 상위 노드가 헤드 태그라는 점을 제외하면 동일한 원리를 사용하여 CSS 파일을 동적으로 로드할 수도 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 파일을 동적으로 도입하는 방법

H5에서 data-* 속성을 사용하는 방법 요약

JS 동기화, 비동기성 및 지연 로딩을 구현하는 방법

위 내용은 JS 파일을 동적으로 로드하는 3가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!