1. วิธีการฝัง Javascript ใน HTML คือการวางโค้ด Javascript ระหว่างแท็กคู่ <script> และ </script> โดยตรง ใช้แอตทริบิวต์ src ของแท็ก <script /> เพื่อกำหนดไฟล์ js ภายนอกและวางไว้ ตัวจัดการเหตุการณ์ เช่น: <p onclick="alert('I am the Javascript ดำเนินการโดยเหตุการณ์ onclick')">คลิกฉัน</p>
เนื่องจากเป็นเนื้อหาของ URL URL นี้จึงใช้ Javascript: protocol พิเศษ เช่น: <a href="javascript:alert('I am a javascript Executed by the javascript: protocol')">คลิกฉัน</a>
ใช้เมธอด document.write() ของจาวาสคริปต์ในการเขียนโค้ดจาวาสคริปต์ใหม่ ใช้ Ajax เพื่อรับโค้ดจาวาสคริปต์แบบอะซิงโครนัส จากนั้นดำเนินการ
วิธีที่ 3 และ 4 จะต้องถูกทริกเกอร์ก่อนจึงจะสามารถดำเนินการได้ เว้นแต่ มันถูกตั้งค่าไว้เป็นพิเศษ เพจจะไม่ถูกดำเนินการ
2. ลำดับการดำเนินการของ Javascript บนเพจ โค้ด Javascript บนเพจเป็นส่วนหนึ่งของเอกสาร HTML ดังนั้นลำดับที่ Javascript จะถูกดำเนินการเมื่อโหลดเพจจึงเป็นลำดับที่แท็กแนะนำ <script /> ปรากฏขึ้น ในแท็ก <script /> หรือผ่าน src JS ภายนอกที่นำเข้าจะถูกดำเนินการตามลำดับที่คำสั่งปรากฏขึ้น และกระบวนการดำเนินการเป็นส่วนหนึ่งของการโหลดเอกสาร
ตัวแปรส่วนกลางและฟังก์ชันที่กำหนดโดยแต่ละสคริปต์สามารถเรียกใช้โดยสคริปต์ที่ดำเนินการในภายหลัง
การเรียกตัวแปรจะต้องได้รับการประกาศก่อนหน้านี้ มิฉะนั้นค่าตัวแปรที่ได้รับจะไม่ได้ถูกกำหนดไว้
<script type="text/javscrpt">//<![CDATA[
การแจ้งเตือน (tmp); // ไม่ได้กำหนดเอาต์พุต
var tmp = 1;
การแจ้งเตือน (tmp); // เอาต์พุต 1
//]]></สคริปต์>
ในสคริปต์เดียวกัน คำจำกัดความของฟังก์ชันอาจปรากฏขึ้นหลังจากการเรียกใช้ฟังก์ชัน อย่างไรก็ตาม หากอยู่ในโค้ดสองส่วนและการเรียกใช้ฟังก์ชันอยู่ในโค้ดชิ้นแรก ข้อผิดพลาดของฟังก์ชันที่ไม่ได้กำหนดจะถูกรายงาน
<script type="text/javscrpt">//<![CDATA[
aa(); //ข้อผิดพลาดของเบราว์เซอร์
//]]></สคริปต์>
<script type="text/javscrpt">//<![CDATA[
aa(); //เอาต์พุต 1
ฟังก์ชั่น aa(){alert(1);}
//]]></สคริปต์>
document.write() จะเขียนเอาต์พุตไปยังตำแหน่งของเอกสารสคริปต์ หลังจากที่เบราว์เซอร์แยกวิเคราะห์เนื้อหาของเอกสารซึ่งมี documemt.write() อยู่ มันจะทำการแยกวิเคราะห์ผลลัพธ์เนื้อหาโดย document.write() ต่อไป จากนั้นจึงแยกวิเคราะห์เอกสาร HTML ต่อไป
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("ฉันเป็น" + tmpStr);');
document.write('</script>');
//]]></สคริปต์>
<script type="text/javascript">//<![CDATA[
การแจ้งเตือน(3);
//]]></สคริปต์>
เนื้อหาของ test.js คือ:
var tmpStr = 1;
การแจ้งเตือน (tmpStr);
ลำดับของค่าป๊อปอัปใน Firefox และ Opera คือ: 1, 2, ฉันคือ 1, 3
ลำดับของค่าป๊อปอัปใน IE คือ: 2, 1, 3 ในเวลาเดียวกันเบราว์เซอร์รายงานข้อผิดพลาด: tmpStr ไม่ได้กำหนดไว้ สาเหตุอาจเป็นเพราะ IE ไม่รอรหัส Javascript ใน SRC โหลดก่อนดำเนินการบรรทัดถัดไปเมื่อ document.write ดังนั้น 2 จะปรากฏขึ้นก่อน และเมื่อ document.write('document.write("I am" + tmpStr)') ถูกดำเนินการและเรียกใช้ tmpStr tmpStr จะไม่ถูกกำหนดไว้ ส่งผลให้เกิดข้อผิดพลาด
เพื่อแก้ไขปัญหานี้ คุณสามารถใช้หลักการแยกวิเคราะห์ HTML เพื่อแยกแท็ก HTML หนึ่งแท็ก จากนั้นรันแท็กถัดไป และแยกโค้ดเพื่อให้ได้สิ่งนี้:
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></สคริปต์>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("ฉันเป็น" + tmpStr);');
document.write('</script>');
//]]></สคริปต์>
<script type="text/javascript">//<![CDATA[
การแจ้งเตือน(3);
//]]></สคริปต์>
ด้วยวิธีนี้ลำดับของค่าเอาต์พุตภายใต้ IE และเบราว์เซอร์อื่น ๆ จะสอดคล้องกัน: 1, 2, ฉันคือ 1, 3
3. วิธีเปลี่ยนลำดับการดำเนินการของ Javascript บนเพจโดยใช้ onload
<script type="text/javascript">//<![CDATA[
window.onload = f;
ฟังก์ชั่น f(){alert(1);}
การแจ้งเตือน(2);
//]]></สคริปต์>
ลำดับของค่าเอาต์พุตคือ 2, 1
ควรสังเกตว่าหากมี winodws.onload หลายอัน เฉพาะอันที่มีประสิทธิภาพสูงสุดเท่านั้นที่จะมีผล วิธีแก้ไขคือ:
window.onload = function(){f();f1();f2();.... . }
การใช้ประเภทเหตุการณ์ DOM ระดับ 2
if(document.addEventListener){
window.addEventListener('โหลด',f,false);
window.addEventListener('โหลด',f1,false);
-
}อื่น{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
-
-
Defer สามารถใช้ใน IE ได้ ฟังก์ชั่นของ defer คือการโหลดโค้ดและไม่ดำเนินการทันที มันจะถูกดำเนินการหลังจากโหลดเอกสารแล้ว มันค่อนข้างคล้ายกับ window.onload แต่ไม่มีข้อจำกัดของ window .onload สามารถใช้ได้ซ้ำๆ แต่ใช้ได้เฉพาะใน IE เท่านั้น ดังนั้นตัวอย่างข้างต้นสามารถแก้ไขได้
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("ฉันเป็น" + tmpStr);');
document.write('</script>');
//]]></สคริปต์>
<script type="text/javascript">//<![CDATA[
การแจ้งเตือน(3);
//]]></สคริปต์>
ด้วยวิธีนี้ IE จะไม่รายงานข้อผิดพลาดและลำดับของค่าเอาต์พุตจะกลายเป็น 1, 3, 2, ฉันเป็น 1
เมื่อตัวแยกวิเคราะห์ HTML พบสคริปต์จะต้องยุติการแยกวิเคราะห์ของเอกสารตามปกติและ รอให้สคริปต์ดำเนินการ เพื่อแก้ปัญหานี้ มาตรฐาน HTML4 กำหนดการเลื่อน ใช้การเลื่อนเพื่อแจ้งให้เบราว์เซอร์ดำเนินการแยกวิเคราะห์เอกสาร HTML ต่อไป และชะลอการเรียกใช้สคริปต์ ความล่าช้านี้มีประโยชน์มากเมื่อมีการโหลดสคริปต์จากไฟล์ภายนอก เพื่อให้เบราว์เซอร์ไม่ต้องรอให้โหลดไฟล์ภายนอกทั้งหมดก่อนที่จะดำเนินการต่อไป ซึ่งสามารถปรับปรุงประสิทธิภาพได้อย่างมีประสิทธิภาพ ขณะนี้ IE เป็นเบราว์เซอร์เดียวที่รองรับแอตทริบิวต์ defer แต่ IE ไม่ได้ใช้แอตทริบิวต์ defer อย่างถูกต้อง เนื่องจากสคริปต์ที่ล่าช้ามักจะล่าช้าจนกระทั่งสิ้นสุดเอกสาร แทนที่จะล่าช้าเฉพาะสคริปต์ที่ไม่ล่าช้าถัดไปเท่านั้น ซึ่งหมายความว่าลำดับการดำเนินการของสคริปต์ที่หน่วงเวลาใน IE ค่อนข้างน่าสับสน และฟังก์ชันและตัวแปรใดๆ ที่ไม่จำเป็นสำหรับสคริปต์ที่ไม่หน่วงเวลาตามมาไม่สามารถกำหนดได้ เวลาดำเนินการของสคริปต์เลื่อนทั้งหมดใน IE ควรอยู่หลังจากสร้างโครงสร้างเอกสาร HTML และก่อน window.onload
ใช้ประโยชน์จากอาแจ็กซ์
เนื่องจาก xmlhttpRequest สามารถกำหนดสถานะการโหลดของเอกสารภายนอกได้ จึงสามารถเปลี่ยนลำดับการโหลดของโค้ดได้