Javascript Script onload, Object.onload in Internet Explorer 6, 7 and 8

http://stackoverflow.com/questions/6806584

요즘은 스크립트를 불러오기 위해 $.getScript 를 많이 사용한다.

아래와 같은 메시지가 없고 콜백까지 해주니 참 좋은 명령이다.

그런데 이 명령을 피해야 하는 경우가 있다.

실행 중간에 필요에 의해서 스크립트를 불러올 경우

euc-kr 한글이 들어간 스크립트이면 가끔 한글이 깨지는 경우가 있다.

최근에는, 지금까지 알고 있던 코드들을 사용하면 아래와 같은 메시지를 만난다.

보안문제로 동기화 방식을 더이상 지원하지 않는다는 주의(알림)메시지이다.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/

신속한 로딩을 위해 꼭 필요하지 않은 스크립트는 나중에 필요할 때만 불러오고 싶다.

스크립트를 불러온 후에 원하는 처리를 하고 싶다.

위와 같은 메시지를 만나고 싶지 않다.

그래서 찾은 코드이고 몇가지 추가했다.

이미 불러왔는데 또 불러올 필요가 없다.

euc-kr 한글이 들어간 스크립트에서도 문제가 없다.

아래와 같이 사용하면 된다.

if (document.getElementById('scriptid')==null) {

loadScript('scriptid', 'js.js', function() {

do(); //스크립트를 불러온 후에 do() 를 실행한다.

});

} else do(); //스크립트가 이미 있으므로 바로 do()를 실행한다.

또한 몇 차례에 걸쳐 콜백을 사용할 수도 있다.

if (document.getElementById('scriptid1')==null) {

loadScript('scriptid1', 'js1.js', function() {

loadScript('scriptid2', 'js2.js', function() {

do(); //1번 완료 후 2번 완료 후에 do() 를 실행한다.

});

});

} else do(); //스크립트들이 이미 있으므로 바로 do()를 실행한다.

function loadScript(id, url, callback) {

var head = document.head || document.getElementsByTagName("head")[0];

var s = document.createElement("script");

s.async=true;

s.id = id;

s.src = url;

var singletonCallback = (function () {

var handled = false;

return function () {

if (handled) {

return;

}

handled = true;

if (typeof (callback) === "function") {

callback();

}

if (debugEnabled) {

log("Callback executed for script load task: " + url);

}

};

}());

s.onreadystatechange = function () {

if (this.readyState === 'complete' || this.readyState === 'loaded') {

singletonCallback();

}

};

s.onload = singletonCallback;

if (debugEnabled) {

log("Added scriptlink to DOM: " + url);

}

head.appendChild(s);

}

주의사항

$.getScript 로 실시간 갱신은 많은 시간이 지나도 문제 없는데 위 코드로 실시간 업데이트에는 안맞다.

실시간 갱신을 하려면 $.get 이나 $.getJSON 을 사용하는 것이 좋다.

위 코드를 사용해 10초 간격으로 스크립트를 추가하고 화면 갱신하고 다시 아래명령으로 스크립트 지우기를 하는데

var s=document.getElementById(id);

s.parentNode.removeChild(s);

최소 1시간에서 몇시간정도 지나면 IE8은 죽는다....

약간의 제약이 있을 때만 위 코드를 사용하고 (https://xhr.spec.whatwg.org/ 에 걸리지 않음)

나머지는 $.getScript 로 사용하면 된다.