โหลดไฟล์ CSS และ JS ภายนอกแบบไดนามิกโดยใช้ DOM เพื่อสร้างแท็ก <script> หรือ <link> และแนบแอตทริบิวต์ เช่น ประเภท ฯลฯ จากนั้นใช้เมธอด appendChild เพื่อผูกแท็กกับแท็กอื่น ซึ่งโดยปกติจะอยู่ที่ <head>
แอปพลิเคชัน:
1. ปรับปรุงการใช้โค้ดซ้ำและลดจำนวนโค้ด
2. เพิ่มตัวควบคุมจาวาสคริปต์และเซสชันเพื่อเปลี่ยนสไตล์ของเพจแบบไดนามิก
3. เนื่องจากเพจโหลดไฟล์ตามลำดับจากบนลงล่างและอธิบายในขณะที่โหลด คุณสามารถเพิ่มตัวควบคุม JavaScript เพื่อควบคุมลำดับการโหลดไฟล์เพจได้ ตัวอย่างเช่น โหลดไฟล์เค้าโครง CSS ก่อน จากนั้นจึงแสดงไฟล์การตกแต่ง CSS พร้อมรูปภาพ แล้วโหลดไฟล์ falsh ขนาดใหญ่ หรือโหลดตามความสำคัญของเนื้อหา
หากต้องการโหลดไฟล์ .js หรือ .css แบบไดนามิก โดยสรุป หมายถึงการใช้วิธี DOM เพื่อสร้างองค์ประกอบ "สคริปต์" หรือ "LINK" ใหม่ที่หรูหราก่อน กำหนดคุณลักษณะที่เหมาะสมให้กับไฟล์ และสุดท้าย ใช้ element.appendChild() เพื่อเพิ่มองค์ประกอบไปยังตำแหน่งที่ต้องการภายในแผนผังเอกสาร ฟังดูแปลกตากว่าที่เป็นจริงมาก
งานต่อไปคือการผูกเข้ากับแท็ก <head> ปัญหาหนึ่งในการผูกคือไฟล์เดียวกันอาจถูกผูกสองครั้ง จะไม่มีข้อยกเว้นหากเบราว์เซอร์ถูกผูกไว้สองครั้ง แต่ประสิทธิภาพจะต่ำ เพื่อหลีกเลี่ยงสถานการณ์นี้ เราสามารถเพิ่มตัวแปรอาเรย์ส่วนกลางใหม่และบันทึกชื่อของไฟล์ที่ถูกผูกไว้ในนั้น ก่อนการเชื่อมโยงแต่ละครั้ง ให้ตรวจสอบว่ามีอยู่แล้วหรือไม่ ถ้ามีอยู่แล้ว ไม่มีอยู่จริง ผูกมันไว้
| document.getElementsByTagName("head")[0].appendChild(fileref) |
โดยการอ้างอิงองค์ประกอบ HEAD ของเพจก่อน แล้วจึงเรียก appendChild() ซึ่งหมายความว่าองค์ประกอบที่สร้างขึ้นใหม่จะถูกเพิ่มที่ส่วนท้ายสุดของแท็ก HEAD นอกจากนี้ คุณควรทราบว่าไม่มีองค์ประกอบใดที่มีอยู่เสียหายในการเพิ่ม องค์ประกอบใหม่ กล่าวคือ หากคุณเรียก loadjscssfile("myscript.js", "js") สองครั้ง คุณจะพบกับองค์ประกอบ "script" ใหม่สองรายการซึ่งทั้งคู่ชี้ไปที่ไฟล์ Javascript เดียวกัน นี่เป็นปัญหาเฉพาะจากไฟล์ จุดยืนด้านประสิทธิภาพ เนื่องจากคุณจะเพิ่มองค์ประกอบที่ซ้ำซ้อนลงในเพจและใช้หน่วยความจำเบราว์เซอร์ที่ไม่จำเป็นในกระบวนการนี้ วิธีง่ายๆ ในการป้องกันไม่ให้มีการเพิ่มไฟล์เดียวกันมากกว่าหนึ่งครั้งคือการติดตามไฟล์ที่เพิ่มโดย loadjscssfile() และโหลดไฟล์เฉพาะในกรณีที่เป็นไฟล์ใหม่:
| var filesadded="" //บันทึกตัวแปรอาร์เรย์ที่มีชื่อไฟล์ที่ถูกผูกไว้ ฟังก์ชั่น checkloadjscssfile (ชื่อไฟล์, ประเภทไฟล์) { if (filesadded.indexOf("["+filename+"]")==-1){//indexOf กำหนดว่ามีรายการในอาร์เรย์หรือไม่ loadjscssfile(ชื่อไฟล์, ประเภทไฟล์) filesadded+="["+filename+"]" //เพิ่มชื่อไฟล์ลงใน filesadded - อื่น alert("เพิ่มไฟล์แล้ว!")//แจ้งเตือนหากมีอยู่แล้ว - checkloadjscssfile("myscript.js", "js") //success.js checkloadjscssfile("myscript.js", "js") // ไฟล์ซ้ำซ้อน ดังนั้นจึงไม่ได้เพิ่มไฟล์ |
ฟังก์ชั่น loadjscssfile (ชื่อไฟล์, ประเภทไฟล์) { if (filetype=="js"){ //กำหนดประเภทไฟล์ var fileref=document.createElement('script')//สร้างแท็ก fileref.setAttribute("type","text/javascript")//กำหนดค่าของประเภทแอตทริบิวต์เป็น text/javascript fileref.setAttribute("src", filename)//ที่อยู่ของไฟล์ - else if (filetype=="css"){ //กำหนดประเภทไฟล์ var fileref=document.createElement("ลิงก์") fileref.setAttribute("rel", "สไตล์ชีท") fileref.setAttribute("ประเภท", "ข้อความ/css") fileref.setAttribute("href", ชื่อไฟล์) - ถ้า (ประเภทของ fileref! = "ไม่ได้กำหนด") document.getElementsByTagName("head")[0].appendChild(fileref) - loadjscssfile("myscript.js", "js") //เบราว์เซอร์จะโหลดไฟล์แบบไดนามิกเมื่อเปิดเพจ loadjscssfile("javascript.php", "js") // เบราว์เซอร์จะโหลด "javascript.php" แบบไดนามิกเมื่อเปิดเพจ loadjscssfile("mystyle.css", "css") //เบราว์เซอร์จะโหลดไฟล์ .css แบบไดนามิกเมื่อเปิดเพจ |