document. write 방식 으로 외부 JS 파일 가이드 도입

표준 참조
document. write 방법 에 대해 서 는 표준 문 서 를 참고 하 십시오: DOM Level 2 HTML 규범 1.5. Objects related to HTML documents。
문제 설명
스 크 립 트 에 document. write 방식 으로 페이지 에 내용 을 기록 할 때 각 브 라 우 저 는 각 스 레 드 를 실행 하 는 순서 가 일치 하지 않 을 수 있 습 니 다.
조성 한 영향
이 현상 은 각 브 라 우 저 에서 실행 을 지연 시 켜 야 할 코드 가 즉시 실행 되 어 프로그램 에 오류 가 발생 합 니 다.
영향 을 받 는 브 라 우 저
IE6 IE7 IE8
 
문제 분석
W3C DOM 표준 문서 에서 document. write 방법 을 사용 하여 JS 파일 을 외부 로 인용 한 후 인 용 된 스 크 립 트 파일 에서 document. write 가 다른 외부 스 크 립 트 파일 을 인용 할 때의 실행 순서 문 제 를 계속 반복 하기 때문에 실제 환경 에서 각 탐색 기구 가 다 릅 니 다.
다음 코드 A 를 분석 해 보 겠 습 니 다.

document.write("before write h1.js"+"<br/>");
document.write("<script  src='h" + "1.js'><\/script>");
document.write("after write h1.js" +"<br/>");

/* h1.js */
document.write("This is h1.js"+"
");

즉, SCRIPT 탭 에 document. write 방식 으로 문서 에 내용 을 입력 하고 그 사이 에 JS 파일 A 를 도입 하 는 것 입 니 다. A 에 도 document. write 가 포함 되 어 있 습 니 다. 문서 에 일부 내용 을 출력 하 는 것 을 의미 합 니 다.각 브 라 우 저 는 다음 과 같이 표 시 됩 니 다.
 
IE6 IE7 IE8
Firefox Chrome Safari Opera
출력 순서 실행
before write h1.js after write h1.js This is h1.js
before write h1.js This is h1.js after write h1.js
즉 IE 는 현재 SCRIPT 태그 에 있 는 모든 document. write 에서 문서 에 내용 을 출력 한 후 document. write 방식 으로 도 입 된 JS 파일 의 document. write 기록 흐름 을 처리 합 니 다.
다른 브 라 우 저 에 대해 서 는 코드 실행 순서에 따라 document. write 방식 으로 기 록 된 내용 을 순서대로 처리 합 니 다.
 
또한, 참조 가능 한 외부 에 document. write 방식 으로 기록 합 니 다. JavaScript 콘 텐 츠 이후 IE Opera 브 라 우 저가 아니면 DOM 트 리 를 즉시 업데이트 하지 않 습 니 다.
다음 코드 B 분석:

document.write('<script src="a.js"><\/script>');
document.write('<DIV id="d1"></DIV>');
alert(document.getElementById('d1')===null);

/* a.js */
//       

예제 스 크 립 트 는 document. write 방식 으로 문서 에 다른 SCRIPT 표 시 를 입력 하여 다른 JS 파일 과 다른 내용 을 가 져 옵 니 다.DIV 표 시 를 즉시 기록 한 후 getElement ById 방법 으로 이 요소 의 DOM 인용 을 얻 을 수 있 습 니 다.각 브 라 우 저 는 다음 과 같이 표 시 됩 니 다.
IE6 IE7 IE8 Opera
Firefox Chrome Safari
false
true
이상 의 테스트 코드 에 대해 IE Opera 는 "document. write (')" 를 실행 한 후 문서 의 DOM 구 조 를 즉시 업데이트 하 는 것 으로 나 타 났 다.
다른 브 라 우 저 에 서 는 현재 SCRIPT 에 표 시 된 실행 흐름 이 완 료 된 후에 야 문서 의 DOM 구 조 를 업데이트 합 니 다.
그 밖 에 또 다른 문제 가 존재 합 니 다. 다음 코드 C 를 분석 하 십시오.

document.write('<script id="d1" src="a.js"><\/script>');
document.write('<script id="d2"></scirpt>');
alert([document.getElementById('d1'),document.getElementById('d2'));

/* a.js */
//       

각 브 라 우 저 는 다음 과 같이 표 시 됩 니 다.
IE6 IE7 IE8 Opera
Firefox Chrome Safari
[Element, Element]
[Element, null]
이 예 에서 Firefox Safari Chrome 브 라 우 저 에서 id = "d2" 의 Script 요 소 는 null 을 출력 합 니 다.d1 이 외부 자원 을 불 러 오지 않 는 한 d2 요 소 는 즉시 가 져 올 수 있 습 니 다.또는 상기 사례 와 같이 현재 스 크 립 트 블록 이 실 행 된 후에 야 d2 에 접근 할 수 있 습 니 다. 이 문제 의 원인 은 불분명 합 니 다. Firefox Safari Chrome 이러한 브 라 우 저 는 스 크 립 트 요소 d1 의 외부 자원 로드 로 인해 d2 요소 가 DOM Tree 에 제때 들 어가 지 않 았 을 수 있 습 니 다.
해결 방안
외부 에서 인 용 된 JS 파일 내 프로그램 이 실행 순서 에 일치 하도록 요구 할 경우 document. write 문 구 를 사용 하여 가 져 온 JS 프로그램 파일 에서 외부 JS 파일 을 다시 불 러 오 는 것 을 피하 십시오.
참고 할 만하 다 동적 으로 도 입 된 외부 JS 파일 의 브 라 우 저 별 실행 순서 가 일치 하지 않 습 니 다. 문장 내 해결 방안.
참조 하 다
지식 고
...
관련 문제
BX 9013: 동적 으로 도 입 된 외부 JS 파일 의 브 라 우 저 별 로 딩 순서 가 일치 하지 않 음 테스트 환경
운영 체제 버 전:
Windows 7 Ultimate build 7600
브 라 우 저 버 전:
IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4
테스트 페이지:
document_write_js_file.html dom_tree_update.html
본문 업데이트 시간:
2010-08-06
키워드
documen. wirte SCRIPT DOM 트 리 업데이트 지연