script 파일 을 동적 으로 불 러 오 는 두 가지 방법

동적 으로 script 을 페이지 로 불 러 오 는 두 가지 방법 이 있 습 니 다.첫 번 째 방법 은 ajax 방식 을 이용 하여 script 파일 코드 를 배경 에서 프론트 로 불 러 온 다음 에 불 러 온 내용 에 대해 eval()을 통 해 코드 를 실행 하 는 것 입 니 다.두 번 째 는 동적 으로 script 라벨 을 만 들 고 src 속성 을 설정 하 는 것 입 니 다.script 라벨 을 페이지 head 에 삽입 하여 js 를 불 러 오 는 것 은 head 에/script>을 쓴 것 과 같 습 니 다.다만 이 script 라벨 은 js 동적 으로 만 든 것 입 니 다.예 를 들 어 우리 가 callbakc.js 를 동적 으로 불 러 오 는 것 과 같 습 니 다.우 리 는 이러한 script 태그 가 필요 합 니 다.

 
<script type="text/javascript" src="call.js"></script>

다음 코드 는 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.append Child(script)이후 에 우 리 는 그 중의 js 를 즉시 호출 할 수 없습니다.브 라 우 저 는 이 js 를 비동기 로 불 러 오기 때문에,우 리 는 그 가 언제 불 러 올 지 모른다.그러나 우 리 는 사건 을 감청 하 는 방법 을 통 해 helper.js 가 불 러 올 지 여 부 를 판단 할 수 있 습 니 다.(call.js 에 callback 방법 이 있다 고 가정 합 니 다.

 
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);

저 는 2 개의 이벤트 감청 함 수 를 설 치 했 습 니 다.ie 에서 onready statechange 를 사용 하고 gecko,webkit 브 라 우 저 와 opera 는 모두 onload 를 지원 하기 때 문 입 니 다.사실 this.ready State=='complete'는 잘 작 동 하지 않 습 니 다.이론 적 으로 상태의 변 화 는 다음 과 같 습 니 다.0 uninitialized 1 loading 2 loaded 3 inteactive 4 complete 이지 만 어떤 상 태 는 건 너 뜁 니 다.경험 에 따 르 면 ie7 에서 loaded 와 completed 중 하나 만 얻 을 수 있 고 모두 나타 날 수 없습니다.원인 은 cache 에서 읽 는 것 이 상태 변화 에 영향 을 미 쳤 는 지 판단 하 는 것 일 수도 있 고 다른 원인 일 수도 있 습 니 다.판단 조건 을 this.ready State=='loaded'|this.ready State=='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);

또 하나의 간단 한 상황 은 help()의 호출 을 helper.js 의 마지막 에 쓸 수 있다 는 것 입 니 다.그러면 helper.js 가 불 러 온 후에 자동 으로 help()를 호출 할 수 있 도록 보장 할 수 있 습 니 다.물론 마지막 으로 이렇게 해 야 돼.너 한테 어 울 리 는 거 아니 야?또한 주의:1.script 태그 의 src 는 도 메 인 을 넘 어 자원 에 접근 할 수 있 기 때문에 이 방법 은 ajax 를 모 의 하여 ajax 의 도 메 인 방문 문 제 를 해결 할 수 있 습 니 다.2.ajax 로 되 돌아 오 는 html 코드 에 script 이 포함 되 어 있 으 면 innerHTML 로 dom 에 직접 삽입 하면 html 의 script 이 작 동 하지 않 습 니 다.jQuery().html(html)의 원본 코드 를 대충 보 았 습 니 다.jQuery 도 들 어 오 는 인 자 를 먼저 분석 하고 그 중의 script 코드 를 벗 기 며 동적 으로 script 라벨 을 만 들 었 습 니 다.jQuery 의 html 방법 으로 dom 의 html 를 추가 하면 script 이 포함 되 어 있 으 면 실행 할 수 있 습 니 다.예:

 
jQuery("#content").html("<script>alert('aa');<\/script>");

script 파일 을 동적 으로 불 러 오 는 두 가지 방법

좋은 웹페이지 즐겨찾기