이 기사에서는 IE8에서 스크립트 태그 onload의 잘못된 생성에 대한 솔루션을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
오늘, 프로젝트를 진행할 때 이상한 문제를 발견했습니다. 동적으로 생성 된 스크립트 태그는 IE8에서 Onload 이벤트를 트리거 할 수 없습니다.
코드는 다음과 같습니다.
다음과 같이 코드를 복사하십시오. var loadjs = function (src, fun) {
var script = null;
script = document.createelement ( "스크립트");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "function") {
script.onload = 재미;
}
document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트);
};
loadjs ( "js/jquery-1.11.0.min.js", function () {
Console.log ( "jQuery에서");
});
loadjs ( "test.js", function () {
Console.log ( "Test.js에서");
});
test.js :
Console.log (jQuery 타입);
실행 결과 :
다음과 같이 코드를 복사하십시오. undefined // test.js가 실행 중일 때 jQuery가 아직로드되지 않았습니다.
>> jQuery 타입 // 콘솔에서 실행되지만 jQuery 객체를 찾아 로딩 순서 문제를 증명합니다.
"기능"
또한 위의 코드에서는 Script.Onload가 실행되지 않습니다. 코드가로드되었으므로 왜 여전히 실행되지 않습니까? 온라인에서 확인한 후 많은 프론트 엔드 개발자 가이 어려운 문제에 직면 한 것을 발견했습니다. 그래서 다음과 같이 몇 가지 대안을 찾았습니다.
다음과 같이 코드를 복사하십시오. var loadjs = function (src, fun) {
var script = null;
script = document.createelement ( "스크립트");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "function") {
script.onreadyStateChange = function () {
var r = script.readystate;
console.log (src + ":" + r);
if (r === '로드'|| r === '완료') {
script.onreadyStateChange = null;
재미있는();
}
};
}
document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트);
};
실행 결과 :
다음과 같이 코드를 복사하십시오. 정의되지 않았습니다
JS/JQuery-1.11.0.min.js : 로딩
test.js : 완료
test.js에서
JS/JQuery-1.11.0.min.js :로드
jQuery에서
실행 단계는 OnLoad와 유사한 기능이 발견되었지만 문제가 있습니다. 순서대로로드되지 않습니다. jQuery 파일이로드되면 test.js가 완료되었고 첫 번째 줄이 먼저 실행됩니다. test.js는 jQuery 전에 실행되므로 정의되지 않은 것이 만들어집니다. 그래서 우리는 이것을 다시 작성하고 선형으로로드 할 수 있습니다.
코드 사본은 다음과 같습니다. loadjs ( "js/jquery-1.11.0.min.js", function () {
Console.log ( "jQuery에서");
loadjs ( "test.js", function () {
Console.log ( "Test.js에서");
});
});
실행 결과 :
다음과 같이 코드를 복사하십시오. JS/JQuery-1.11.0.min.js :로드
JS/JQuery-1.11.0.min.js :로드
jQuery에서
기능
test.js : 완료
test.js에서
이번에는 실행 순서가 우리가 예약 한 순서에 정확히 이루어 지지만 위의 코드는 어색해 보이며 레이어로 중첩 레이어가 필요 하므로이 글쓰기 방법을 다시 발견했습니다.
다음과 같이 코드를 복사하십시오. var loadjs = function (src, fun) {
var script = null;
script = document.createelement ( "스크립트");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "function") {
script.onreadyStateChange = function () {
var r = script.readystate;
console.log (src + ":" + r);
if (r === '로드'|| r === '완료') {
script.onreadyStateChange = null;
재미있는();
}
};
}
document.write (script.outerhtml);
//document.getElementsByTagname("head")..0]. AppendChild(script);
};
loadjs ( "js/jquery-1.11.0.min.js", function () {
Console.log ( "jQuery에서");
});
loadjs ( "test.js", function () {
Console.log ( "Test.js에서");
});
실행 결과 순서도 다릅니다.
다음과 같이 코드를 복사하십시오. 함수
JS/JQuery-1.11.0.min.js :로드
jQuery에서
test.js :로드
test.js에서
로딩 순서를 변경하는 경우
코드 사본은 다음과 같습니다. loadjs ( "test.js", function () {
Console.log ( "Test.js에서");
});
loadjs ( "js/jquery-1.11.0.min.js", function () {
Console.log ( "jQuery에서");
});
실행 결과는 다르며, 유사하게 순서대로로드됩니다.
다음과 같이 코드를 복사하십시오. 정의되지 않았습니다
test.js :로드
test.js에서
JS/JQuery-1.11.0.min.js :로드
jQuery에서
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.