스크립트 요소 및 이벤트 실행

IE9 표준 모드에서는 script 요소에 대해 표준 기반 및 상호 운용 load 이벤트를 지원합니다. Windows Internet Explorer의 이전 버전에서는script 요소에 대해 비상호 운용 onreadystatechange 이벤트만 지원했습니다.

기존 웹 사이트와의 호환성을 위해 IE9 모드에서는 여전히 onreadystatechange 이벤트가 지원됩니다. 이 두 이벤트가 모두 등록된 사이트는 두 개의 콜백을 갖게 되지만, Internet Explorer 이전 버전에는 하나만 있었습니다.

일반적으로 이러한 이벤트는 페이지 로딩을 차단하지 않도록 나중에 사용되어 기능을 실행합니다. 이러한 경우 기능을 검색하지 못하면(onreadystatechangeload 모두 등록) 콜백이 두 번 실행될 수 있습니다. 이 경우 대개 스크립트 오류가 발생하거나 페이지 기능이 작동하지 않습니다.

이러한 시나리오에서는 표준 기반 load 이벤트가 권장되며 가능할 때마다 이 이벤트를 사용해야 합니다. 웹 개발자는 script 요소에 대해 load 이벤트를 지원하는 브라우저를 검색하기 위해 기능 검색을 사용해야 합니다. Internet Explorer의 이전 버전에서는 onreadystatechange를 사용하도록 스크립트가 대체됩니다.

다음 코드 예제는 잘못된 코딩 패턴을 보여 줍니다.

s = document.createElement("script");
s.src="readystate.js";
s.onreadystatechange = callback; //Legacy IE
s.onload = callback; //Other browsers
document.body.appendChild(s);
function callback() { console.log("loaded"); }

다음 코드 예제는 권장 패턴을 보여 줍니다.

s = document.createElement("script");
s.src="myscript.js";
if(s.addEventListener) {
  s.addEventListener("load",callback,false);
} 
else if(s.readyState) {
  s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() { console.log("loaded"); }

관련 항목

 

 

표시:
© 2014 Microsoft