บทความนี้ส่วนใหญ่แนะนำสองวิธีในการโหลดไฟล์ JavaScript แบบไดนามิก เพื่อนที่สนใจสามารถอ้างถึงได้
สิ่งแรกคือการใช้วิธี AJAX เพื่อโหลดรหัสไฟล์สคริปต์จากพื้นหลังไปยังเบื้องหน้าจากนั้นใช้รหัสสำหรับเนื้อหาที่โหลดผ่าน Eval () ประเภทที่สองคือการสร้างแท็กสคริปต์กำหนดค่าแอตทริบิวต์ SRC และโหลด JS โดยการแทรกแท็กสคริปต์ลงในหัวของหน้าซึ่งเทียบเท่ากับการเขียน <script src = "... "> </script> ในหัว แต่แท็กสคริปต์นี้ถูกสร้างขึ้นโดยใช้ JS SRC
ตัวอย่างเช่นหากเราต้องการโหลด callbakc.js แบบไดนามิกเราต้องมีแท็กสคริปต์:
รหัสมีดังนี้: คัดลอกรหัสดังต่อไปนี้: <script type = "text/javascript" src = "call.js"> </script>
รหัสต่อไปนี้คือวิธีการสร้างแท็กนี้ผ่าน JS (และเพิ่มลงในหัว):
รหัสมีดังนี้:
var head = document.getElementsByTagname ('head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.src = 'call.js'; head.appendchild (สคริปต์);เมื่อโหลด call.js เราต้องเรียกวิธีการในนั้น อย่างไรก็ตามหลังจาก header.appendchild (สคริปต์) เราไม่สามารถโทรหา JS ได้ทันที เนื่องจากเบราว์เซอร์โหลด js แบบอะซิงโครนัสนี้เราจึงไม่รู้ว่าจะโหลดเมื่อใด อย่างไรก็ตามเราสามารถตัดสินได้ว่า Helper.js กำลังโหลดผ่านการฟังเหตุการณ์หรือไม่ (สมมติว่ามีวิธีการโทรกลับใน call.js) รหัสมีดังนี้:
var head = document.getElementsByTagname ('head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.onreadyStateChange = function () {ถ้า (this.readyState == 'เสร็จสมบูรณ์') การเรียกกลับ (); } script.onload = function () {callback (); } script.src = 'helper.js'; head.appendchild (สคริปต์);ฉันตั้งค่าฟังก์ชั่นการฟังเหตุการณ์ 2 รายการเพราะ OnReadyStateChange ใช้ใน IE ในขณะที่ ONLOAD ได้รับการสนับสนุนโดย Gecko, WebKit Browser และ Operator ในความเป็นจริง this.readyState == 'เสร็จสมบูรณ์' ใช้งานไม่ได้ดีนัก ในทางทฤษฎีการเปลี่ยนแปลงของรัฐมีดังนี้:
1. ไม่ได้รับความสนใจ
2. การโหลด
3. โหลด
4. เชิงรุก
5.complete
แต่บางรัฐจะถูกข้าม จากประสบการณ์ใน IE7 คุณสามารถรับหนึ่งในการโหลดและเสร็จสมบูรณ์และมันไม่สามารถปรากฏขึ้นได้ เหตุผลอาจเป็นไปได้ว่าคุณจะพิจารณาว่าการอ่านจากแคชมีผลต่อการเปลี่ยนแปลงในรัฐหรือเหตุผลอื่น ๆ เป็นการดีที่สุดที่จะเปลี่ยนเงื่อนไขการตัดสินเป็น this.readyState == 'โหลด' || this.readystate == 'เสร็จสมบูรณ์'
อ้างถึงการใช้งาน jQuery ในที่สุดเราก็นำไปใช้ดังนี้: รหัสมีดังนี้:
var head = document.getElementsByTagname ('head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.onload = script.onreadyStateChange = function () {if (! this.readyState || this.readyState === "โหลด" || this.readyState === "เสร็จสมบูรณ์") {help (); // จัดการการรั่วไหลของหน่วยความจำใน IE script.onload = script.onreadyStateChange = null; - script.src = 'helper.js'; head.appendchild (สคริปต์);มีสถานการณ์ง่าย ๆ อีกอย่างหนึ่งที่คุณสามารถเขียนการโทรเพื่อช่วย () ในตอนท้ายของ helper.js ดังนั้นคุณสามารถมั่นใจได้ว่าสามารถใช้ความช่วยเหลือ () โดยอัตโนมัติหลังจากโหลด helper.js แน่นอนในท้ายที่สุดสิ่งนี้ไม่เหมาะสำหรับแอปพลิเคชันของคุณ
หมายเหตุ:
1. เนื่องจากแท็กสคริปต์ SRC สามารถเข้าถึงทรัพยากรข้ามโดเมนวิธีนี้สามารถจำลอง AJAX และแก้ปัญหาการเข้าถึง AJAX Cross-Domain
2. หากรหัส HTML ส่งคืนด้วย AJAX มีสคริปต์การแทรกสคริปต์ใน HTML โดยตรงลงใน DOM ด้วย InnerHTML ไม่สามารถทำให้สคริปต์ใน HTML ทำงานได้ ฉันดูที่รหัสต้นฉบับของ jQuery () HTML (HTML) JQuery ยังแยกพารามิเตอร์ที่ผ่านมาเป็นครั้งแรกแถบรหัสสคริปต์ในนั้นและสร้างแท็กสคริปต์แบบไดนามิก วิธี HTML ที่ใช้โดย jQuery จะถูกเพิ่มลงใน DOM HTML หากมีสคริปต์สามารถดำเนินการได้ ชอบ:
การคัดลอกรหัสมีดังนี้: jQuery ("#content"). html ("<script> การแจ้งเตือน ('aa'); <// script>");
ด้านบนเป็นวิธีการโหลดไฟล์ JavaScript แบบไดนามิก ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน