JavaScript 파일을 동적으로 로드하는 두 가지 방법_javascript 팁

이 글에서는 JavaScript 파일을 동적으로 로드하는 두 가지 방법을 주로 소개합니다. 관심 있는 친구들은 참고하세요
첫 번째는 ajax를 사용하여 스크립트 파일 코드를 백그라운드에서 포그라운드로 로드한 후 로드된 콘텐츠에 대해 eval()을 통해 코드를 실행하는 것입니다. 두 번째는 스크립트 태그를 동적으로 생성하고, src 속성을 구성한 다음, 스크립트 태그를 페이지 헤드에 삽입하여 js를 로드하는 것입니다. 이는 cf63513d015db02810a3e91eb1a177969429d6e1efad07153846e528605c447e에 있는데 이 스크립트 태그는 js animation으로 생성되었습니다
예를 들어, callbakc.js를 동적으로 로드하려면 다음과 같은 스크립트 태그가 필요합니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

9a51e31c4a84694f80202498de463c9e

다음 코드는 js를 통해 이 태그를 생성하고 헤드에 추가하는 방법입니다.
코드는 다음과 같습니다.

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script); 

call.js가 로드되면 그 안에 있는 메소드를 호출해야 합니다. 그러나 header.appendChild(script) 바로 뒤에는 js를 호출할 수 없습니다. 브라우저는 이 js를 비동기적으로 로드하기 때문에 언제 로드가 완료되었는지 알 수 없습니다. 그러나 이벤트를 수신하여 helper.js가 로드되었는지 확인할 수 있습니다. (call.js에 콜백 메소드가 있다고 가정) 코드는 다음과 같습니다.

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

IE에서는 onreadystatechange를 사용하고, gecko, webkit browsers, Opera 모두 onload를 지원하기 때문에 2개의 이벤트 리스닝 기능을 설정했습니다. 실제로 this.readyState == 'complete'는 잘 작동하지 않습니다. 이론적으로 상태 변경은 다음과 같습니다.
1.초기화되지 않음
2.로딩
3.로드됨
4.인터랙티브
5.완성
그러나 일부 주를 건너뜁니다. 경험에 따르면 IE7에서는 로드됨과 완료됨 중 하나만 얻을 수 있지만 둘 다 얻을 수는 없습니다. 그 이유는 상태 변경이 캐시 읽기에 영향을 미치는지 여부에 영향을 주기 때문일 수도 있고 다른 이유일 수도 있습니다. 판단 조건을 this.readyState == 'loaded' || this.readyState == 'complete'

로 변경하는 것이 가장 좋습니다.

jQuery 구현을 참고하면 최종 구현은 다음과 같습니다. 코드는 다음과 같습니다.

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

또 다른 간단한 상황은 helper.js 끝에 help() 호출을 작성하는 것입니다. 그러면 helper.js가 로드된 후 help()가 자동으로 호출될 수 있음을 보장할 수 있습니다. 물론 이렇게 되어야 합니다. 결국 당신에게 적합한 앱이 아닙니다.

추가 참고 사항:

1. 스크립트 태그의 src는 도메인 전반에 걸쳐 리소스에 액세스할 수 있으므로 이 방법을 사용하면 Ajax를 시뮬레이션하고 Ajax 도메인 간 액세스 문제를 해결할 수 있습니다.
2. ajax가 반환한 HTML 코드에 스크립트가 포함된 경우 innerHTML을 dom에 직접 삽입해도 HTML의 스크립트가 작동하지 않습니다. jQuery().html(html)의 원본 코드를 대략적으로 살펴본 후 jQuery는 먼저 들어오는 매개 변수를 구문 분석하고 스크립트 코드를 제거한 다음 동적으로 스크립트 태그를 생성합니다. dom에 스크립트가 포함되어 있으면 실행 가능합니다. 예:

코드 복사 코드는 다음과 같습니다.

jQuery("#content").html("3f1c4e4b6b16bbbd69b2ee476dc4f83a 경고(' aa');2cacc6d41bbb37262a98f745aa00fbf0");

위 내용은 JavaScript 파일을 동적으로 로드하는 방법입니다. 모든 분들의 학습에 도움이 되길 바랍니다.