이번에는 JS 파일을 동적으로 로드하는 세 가지 방법을 요약해 보겠습니다. 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue.js 계산 및 리스너 속성 사용에 대한 자세한 설명
JS에서 jquery.js 로딩 방법에 대한 자세한 설명
위 내용은 JS 파일을 동적으로 로드하는 세 가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!