ตัวอย่างนี้สรุปวิธีการโหลด JS แบบไดนามิก แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
วิธีที่ 1: Direct Document.write (แบบอะซิงโครนัส)
คัดลอกรหัสดังต่อไปนี้: <ภาษาสคริปต์ = "JavaScript">
document.write ("<script src = 'res/extwidget/echarts/xx.js'> <// script>");
</script>
เนื่องจากวิธีนี้คือการโหลดแบบอะซิงโครนัส document.write จะเขียนอินเทอร์เฟซใหม่ซึ่งเห็นได้ชัดว่าไม่สามารถใช้งานได้จริง
วิธีที่ 2: เปลี่ยนแอตทริบิวต์ SRC แบบไดนามิกของสคริปต์ที่มีอยู่ (แบบอะซิงโครนัส)
คัดลอกรหัสดังต่อไปนี้: <script src = '' id = "xx"> </script>
<ภาษาสคริปต์ = "JavaScript">
xx.src = "test.js"
</script>
วิธีนี้จะไม่เปลี่ยนองค์ประกอบอินเทอร์เฟซอย่าเขียนองค์ประกอบอินเตอร์เฟสใหม่ แต่จะถูกโหลดแบบอะซิงโครนัส
วิธีที่ 3: สร้างองค์ประกอบสคริปต์แบบไดนามิก (แบบอะซิงโครนัส) แบบไดนามิก
คัดลอกรหัสดังต่อไปนี้: <script>
var body = document.getElementsByTagname ('body') [0];
var script = document.createElement ("สคริปต์");
script.type = "text/javascript";
script.src = "xx.js";
Body.AppendChild (Oscript);
</script>
เมื่อเปรียบเทียบกับวิธีที่สองข้อดีของวิธีนี้คือไม่จำเป็นต้องเขียนแท็กสคริปต์บนอินเทอร์เฟซที่จุดเริ่มต้น ข้อเสียคือการโหลดแบบอะซิงโครนัส
วิธีที่ 4: การโหลด XMLHTTTPREQUEST/ACTIONXOBJECT (ASYNCHRONOUS)
คัดลอกรหัสดังนี้:/**
* การโหลดแบบอะซิงโครนัสของสคริปต์ JS
* @param id รหัสของแท็ก <script> ที่ต้องตั้งค่า
* @param url relation หรือ path ไปยังไฟล์ js
-
LOADJS: ฟังก์ชัน (id, url) {
var xmlhttp = null;
if (window.activexobject) {// ie
พยายาม {
// สามารถใช้ใน IE6 และรุ่นใหม่กว่า
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//ie5.5 และรุ่นใหม่สามารถใช้งานได้
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
-
} อื่นถ้า (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = ใหม่ xmlhttprequest ();
-
// ใช้การโหลดแบบซิงโครนัส
xmlhttp.open ("รับ", url, false);
// ส่งคำขอซิงโครไนซ์
// หากเบราว์เซอร์เป็นโครเมี่ยมหรือโอเปร่าจะต้องเผยแพร่ก่อนที่จะสามารถทำงานได้มิฉะนั้นจะมีการรายงานข้อผิดพลาด
XMLHTTP.SEND (NULL);
xmlhttp.onreadystatechange = function () {
// 4 หมายความว่ามีการส่งข้อมูล
if (xmlhttp.readystate == 4) {
// 0 เป็นพื้นที่ท้องถิ่นที่เข้าถึงได้ 200 ถึง 300 หมายถึงการเข้าถึงเซิร์ฟเวอร์นั้นสำเร็จ
// 304 หมายความว่าการเข้าถึงคือแคชโดยไม่ต้องแก้ไข
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagname ("body") [0];
var myscript = document.createelement ("สคริปต์");
myscript.language = "JavaScript";
myscript.type = "text/javascript";
myscript.id = id;
พยายาม{
// IE8 และต่อไปนี้ไม่สนับสนุนวิธีนี้และจำเป็นต้องตั้งค่าผ่านแอตทริบิวต์ข้อความ
myscript.appendchild (document.createtextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
-
mybody.appendchild (myscript);
-
-
-
// ใช้การโหลดแบบอะซิงโครนัส
xmlhttp.open ("รับ", url, true);
XMLHTTP.SEND (NULL);
-
การตั้งค่าเป็นเท็จในการเปิดหมายถึงการโหลดแบบซิงโครนัส การโหลดแบบซิงโครนัสไม่จำเป็นต้องมีการตั้งค่าเหตุการณ์ onreadystatechange
วิธีการทั้งสี่นี้ถูกดำเนินการแบบอะซิงโครนัสนั่นคือในขณะที่โหลดสคริปต์เหล่านี้สคริปต์ในหน้าหลักยังคงทำงานอยู่
วิธีที่ 5: การโหลด XMLHTTTPREQUEST/ACTIONXOBJECT (ซิงโครนัส)
คัดลอกรหัสดังนี้:/**
* การโหลดแบบซิงโครนัสของสคริปต์ JS
* @param id รหัสของแท็ก <script> ที่ต้องตั้งค่า
* @param url relation หรือ path ไปยังไฟล์ js
* @return {Boolean} ส่งคืนไม่ว่าจะโหลดสำเร็จหรือไม่จริงหมายถึงความสำเร็จหมายถึงความล้มเหลวเท็จ
-
LOADJS: ฟังก์ชัน (id, url) {
var xmlhttp = null;
if (window.activexobject) {// ie
พยายาม {
// สามารถใช้ใน IE6 และรุ่นใหม่กว่า
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//ie5.5 และรุ่นใหม่สามารถใช้งานได้
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
-
} อื่นถ้า (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = ใหม่ xmlhttprequest ();
-
// ใช้การโหลดแบบซิงโครนัส
xmlhttp.open ("รับ", url, false);
// ส่งคำขอซิงโครไนซ์ หากเบราว์เซอร์เป็น Chrome หรือ Opera จะต้องเผยแพร่ก่อนที่จะทำงานมิฉะนั้นจะมีการรายงานข้อผิดพลาด
XMLHTTP.SEND (NULL);
// 4 หมายความว่ามีการส่งข้อมูล
if (xmlhttp.readystate == 4) {
// 0 เป็นพื้นที่ท้องถิ่นที่เข้าถึงได้ 200 ถึง 300 หมายถึงการเข้าถึงเซิร์ฟเวอร์นั้นสำเร็จและ 304 หมายความว่าไม่ได้ทำแคชที่เข้าถึงได้
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagname ("body") [0];
var myscript = document.createelement ("สคริปต์");
myscript.language = "JavaScript";
myscript.type = "text/javascript";
myscript.id = id;
พยายาม{
// IE8 และต่อไปนี้ไม่สนับสนุนวิธีนี้และจำเป็นต้องตั้งค่าผ่านแอตทริบิวต์ข้อความ
myscript.appendchild (document.createtextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
-
mybody.appendchild (myscript);
กลับมาจริง;
}อื่น{
กลับเท็จ;
-
}อื่น{
กลับเท็จ;
-
-
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน