โดยทั่วไปหากมีการโหลดรหัสจาวาสคริปต์ที่จำเป็นทั้งหมดในครั้งเดียวเว็บเพจเริ่มต้นจะช้าลง แต่ไม่จำเป็นต้องใช้รหัสจำนวนมากและไม่จำเป็นต้องใช้รหัสที่ไม่จำเป็น หากคุณต้องการโหลดรหัส JavaScript แบบไดนามิกคุณสามารถใช้โมเดล DOM เพื่อเพิ่มโหนด <Script> ในเอกสาร HTML และตั้งค่าแอตทริบิวต์ SRC ของโหนดนี้ (เช่นไฟล์ JavaScript) ไปยังรหัส JavaScript ที่ต้องโหลดแบบไดนามิก
นี่คือตัวอย่างของการทำฟังก์ชั่นดังกล่าว:
(1) สร้างไฟล์ jsloaderTest.html ใหม่
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> jsloader () {this.load = function (url) {// รับ <cript> ทั้งหมดแท็ก var ss = document.getElementByTagname ("สคริปต์"); // ทดสอบว่ามีการรวมไฟล์ที่ระบุไว้หรือไม่ หากมีการรวมอยู่ให้ทริกเกอร์เหตุการณ์ onsuccess และกลับมาสำหรับ (i = 0; i <ss.length; i ++) {ถ้า (ss [i] .src && ss [i] .src.indexof (url)! =-1) {this.onsuccess (); กลับ; }} // สร้างโหนดสคริปต์และตั้งค่าแอตทริบิวต์ให้เป็นไฟล์ JavaScript ที่มีการเข้าถึง s = document.createElement ("สคริปต์"); s.type = "ข้อความ/javascript"; S.SRC = URL; // รับหัวโหนดและแทรก <Script> ลงใน var head = document.getElementsByTagname ("head") [0]; head.appendchild (s); // รับการอ้างอิงของคุณเอง var self = this; // สำหรับเบราว์เซอร์ IE ให้ใช้เหตุการณ์ ReadeStateChange เพื่อตรวจสอบว่าโหลดนั้นสำเร็จหรือไม่ // สำหรับเบราว์เซอร์อื่น ๆ ให้ใช้เหตุการณ์ ONLOAD เพื่อตรวจสอบว่าการโหลดนั้นสำเร็จหรือไม่ เหตุการณ์ที่ประสบความสำเร็จด้านล่าง if (this.readyState && this.readyState == "โหลด") ส่งคืน; self.onsuccess (); } s.onerror = function () {head.removeChild (s); self.onfailure (); - // กำหนดเหตุการณ์ความสำเร็จในการโหลด this.onsuccess = function () {}; // กำหนดเหตุการณ์ที่ล้มเหลว this.onfailure = function () {}; } ฟังก์ชั่น btnclick () {// สร้างวัตถุ var jsloader = new jsloader (); // กำหนดตัวจัดการความสำเร็จในการโหลด jsloader.onsuccess = function () {sayhello (); } // กำหนดตัวจัดการความล้มเหลวในการโหลด jsloader.onfailure = function () {alert ("การโหลดไฟล์ล้มเหลว!"); } // เริ่มโหลด jsloader.load ("hello.js"); } </script> </head> <body> <dable> <อินพุต type = "ส่ง" name = "ส่ง" onclick = "javascript: btnclick ()" value = "โหลดไฟล์ JavaScript"> </label> </body> </html>(2) สร้างไฟล์ hello.js ใหม่รวมถึงรหัสต่อไปนี้:
// ฟังก์ชั่นเอกสาร JavaScript Sayshello () {Alert ("Hello World! ไฟล์ JavaScript ที่โหลดสำเร็จ"); } // JavaScript DocumentFunction Sayshello () {Alert ("Hello World! ไฟล์ JavaScript ที่โหลดสำเร็จ"); -