Sự kiện onload
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < ! DOCTYPE html > < html > < head > <script> function myFunction ( ) { alert ( "Trang đã được tải" ) ; } </script> ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Trang đã được tải"); } </script> </head> <body onload="myFunction()"> <h1>Nội dung trang</h1> </body> </html> |
Demo
Xem thêm các ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tính onload được kích hoạt khi đối tượng đã được tải xong.
onload thường được sử dụng nhất trong thẻ <body> để chạy một script khi trình duyệt của bạn đã tải đầy đủ tất cả thành phần của website (bao gồm ảnh, script, CSS, v.v…). Tuy nhiên, nó cũng có thể sử dụng trong những thẻ khác (xem phần “Chi tiết” bên dưới).
Thuộc tính onload có thể được sử dụng để kiểm tra phiên bảnvà kiểu trình duyệt của người dùng, sau đó tải các thành phần của website để tương thích với trình duyệt dựa trên thông tin thu được.
Thuộc tính onload cũng có thể được sử dụng để thao tác với cookie (xem phần “Ví dụ” bên dưới).
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onload | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
Không có sự khác biệt.
Cú pháp
|
1 |
<element onload="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Thuộc tính được sử dụng trong thẻ : <body>, <frame>, <frameset>, <iframe>, <img>, <input type=”image”>, <link>, <script> và<style>
Ví dụ
Sử dụng onload trong thẻ <img>. Hiện ra thông báo “Ảnh đã được tải” ngay khi ảnh được tải xong:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <img src="https://webvn.com/wp-content/uploads/2014/10/wvnlogo.png" onload="loadImage()" awidth="200" height="72" alt="Logo WebVN" /> <script> function loadImage() { alert("Ảnh đã được tải"); } </script> </body> </html> |
Demo
Sử dụng sự kiện onload để làm việc với cookie :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body onload="checkCookies()"> <p id="demo"></p> <script> function checkCookies() { var text = ""; if (navigator.cookieEnabled == true) { text = "Cookies đã được bật."; } else { text = "Cookies chưa được bật."; } document.getElementById("demo").innerHTML = text; } </script> </body> </html> |
Demo
