onloadเหตุการณ์
ตัวอย่าง
เรียกใช้ JavaScript ทันทีหลังจากโหลดหน้าแล้ว:
<body onload="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ onload เกิดขึ้นเมื่อโหลดวัตถุแล้ว
ส่วนใหญ่มักจะใช้ onload ภายในองค์ประกอบ <body> เพื่อรันสคริปต์เมื่อหน้าเว็บโหลดเนื้อหาทั้งหมดอย่างสมบูรณ์ (รวมถึงรูปภาพ ไฟล์สคริปต์ ไฟล์ CSS เป็นต้น)
สามารถใช้เหตุการณ์ onload เพื่อตรวจสอบประเภทเบราว์เซอร์และเวอร์ชันของเบราว์เซอร์ของผู้เข้าชม และโหลดเวอร์ชันที่เหมาะสมของหน้าเว็บตามข้อมูล
นอกจากนี้ยังสามารถใช้เหตุการณ์ onload เพื่อจัดการกับคุกกี้ (ดู "ตัวอย่างเพิ่มเติม" ด้านล่าง)
รองรับเบราว์เซอร์
| Event | |||||
|---|---|---|---|---|---|
| onload | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ใน HTML:
<element onload="myScript">
ในจาวาสคริปต์:
object.onload = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("load", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
| ฟองอากาศ: | ไม่ |
|---|---|
| ยกเลิกได้: | ไม่ |
| ประเภทเหตุการณ์: | UiEventหากสร้างขึ้นจากส่วนต่อประสานผู้ใช้เหตุการณ์อื่น |
| แท็ก HTML ที่รองรับ: | <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
| รุ่น DOM: | กิจกรรมระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้ onload บนองค์ประกอบ <img> การแจ้งเตือน "โหลดรูปภาพ" ทันทีหลังจากโหลดรูปภาพแล้ว:
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
ตัวอย่าง
การใช้เหตุการณ์ onload เพื่อจัดการกับคุกกี้:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>