19/09/2018, 14:45
Sự kiện onhashchange
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 < ! DOCTYPE html > < html > < body onhashchange = "myFunction()" > < p > Nh ấ n v à o n ú ...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body onhashchange="myFunction()"> <p>Nhấn vào nút để thay đổi URL hiện tại sang #part5</p> <button onclick="changePart()">Nhấn vào đây</button> <p id="demo"></p> <script> // Sử dụng thuộc tính location.hash để thay đổi hash (phần đằng sau dấu # trên thanh địa chỉ) function changePart() { location.hash = "part5"; var x = "Hash hiện tại là: " + location.hash; document.getElementById("demo").innerHTML = x; } // Hiện ra không báo khi thay đổi hash function myFunction() { alert("Hash đã được thay đổi!"); } </script> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính onhashchange được kích hoạt khi một phần địa chỉ (hash) bị thay đổi (đằng sau ký tự ‘#’).
Một ví dụ về hash: Ta có địa chỉ như sau
https://webvn.com/#part2 – Hash ở đây là #part2.
Để gọi sự kiện này bạn có thể:
- Thay đổi hash bằng location.hash hoặc location.href property
- Duyệt trang hiện tại bằng nút “back” hoặc “forward”
- Nhấn vào một liên kết dẫn đến trang
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
Thuộc tính | |||||
---|---|---|---|---|---|
onhashchange | 5.0 | 3.6 | 8.0 | 5.0 | 10.6 |
Khác biệt giữa HTML 4.01 và HTML5
onhashchange là thuộc tính mới trong HTML5.
Cú pháp
1 |
<element onhashchange="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>