บทความนี้อธิบายวิธีแก้ปัญหาการสร้างแท็กสคริปต์ที่ไม่ถูกต้องใน IE8 แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
วันนี้เมื่อฉันทำงานในโครงการฉันพบปัญหาแปลก ๆ แท็กสคริปต์ที่สร้างขึ้นแบบไดนามิกไม่สามารถทริกเกอร์เหตุการณ์ onload ภายใต้ IE8
รหัสมีดังนี้:
คัดลอกรหัสดังนี้: var loadjs = function (src, fun) {
var script = null;
script = document.createElement ("script");
script.type = "text/javascript";
script.src = src;
if (typeof fun === "function") {
script.onload = fun;
-
document.getElementByTagname ("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 (typeof jQuery);
ผลการทำงาน:
คัดลอกรหัสดังนี้: undefined // เมื่อ test.js กำลังทำงานอยู่ jQuery ยังไม่ถูกโหลด
>> typeof jQuery // เรียกใช้จากคอนโซล แต่พบวัตถุ jQuery พิสูจน์ปัญหาการโหลดคำสั่งซื้อ
"การทำงาน"
ยิ่งกว่านั้น Script.onload ไม่ได้ดำเนินการในรหัสด้านบน โค้ดได้รับการโหลดดังนั้นทำไมจึงยังไม่ดำเนินการ OnLoad? หลังจากตรวจสอบออนไลน์ฉันพบว่านักพัฒนาส่วนหน้าหลายคนพบปัญหาที่ยากลำบากนี้ดังนั้นฉันจึงพบทางเลือกบางอย่างดังนี้:
คัดลอกรหัสดังนี้: var loadjs = function (src, fun) {
var script = null;
script = document.createElement ("script");
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.getElementByTagname ("head") [0] .AppendChild (สคริปต์);
-
ผลการดำเนินการ:
คัดลอกรหัสดังนี้: ไม่ได้กำหนด
js/jQuery-1.11.0.min.js: กำลังโหลด
test.js: เสร็จสมบูรณ์
จาก test.js
js/jQuery-1.11.0.min.js: โหลด
จาก jQuery
ขั้นตอนการดำเนินการคือฟังก์ชั่นที่คล้ายกับ ONLOAD ได้รับการพบ แต่มีปัญหา มันไม่ได้โหลดตามลำดับ เมื่อไฟล์ jQuery กำลังโหลดการทดสอบ. 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");
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.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 ของทุกคน