Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính sự kiện onhashchange trong HTML

Thuộc tính sự kiện onhashchange kích hoạt khi phần hash (neo) của URL thay đổi (phần sau ký tự #).

Cú pháp

<tagname onhashchange="script"></tagname>

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; }
  .btn { background: #db133a; border: none; color: #fff; height: 2rem; padding: 8px 10px; }
</style>
</head>
<body onhashchange="hashChanged()">
<h1>Demo onhashchange</h1>
<button class="btn" onclick="changeHash()">Đổi Hash</button>
<p class="msg"></p>
<script>
  function changeHash() {
    location.hash = "newHashPart";
    document.querySelector('.msg').innerHTML = 'Hash hiện tại: ' + location.hash;
  }
  function hashChanged() {
    document.body.style.background = 'lightblue';
    document.querySelector('.msg').innerHTML += '<br>Sự kiện onhashchange đã kích hoạt!';
  }
</script>
</body>
</html>

Kết quả

Nhấn "Đổi Hash" → URL thêm #newHashPart, nền trang đổi màu, sự kiện kích hoạt.

Ứng dụng: Single Page Application (SPA) routing dựa trên hash, tracking trạng thái trang mà không reload. Cũng có window.onhashchange.