当 HTML 中 URL 的锚点部分发生变化时执行脚本?

htmlweb developmentfront end technology更新于 2024/8/13 2:52:17

在本文中，我们将学习如何在 HTML 中 URL 的锚点部分发生变化时执行脚本。

HTML 定义中的 onhashchange 属性表明，当当前 URL 的锚点部分发生变化时，该属性就会激活。当前 URL 的"#"符号表示锚点部分。此属性的单值脚本会在 onhashchange 事件属性激活时执行。此属性仅适用于 <body> 标签。

让我们深入研究以下示例，以进一步了解如何在 HTML 中 URL 的锚点部分发生变化时执行脚本。

示例

在以下示例中，我们将使用 <body> 元素的 onhashchange 属性。

<!DOCTYPE html>
<html>
<body onhashchange="mytutorial()">
   <p>Click To Change The Anchor</p>
   <button onclick="tutorial()">Try it</button><br><br><br>
   <p id="tutorial1"></p>
   <script>
      function tutorial() {
         location.hash = "Welcome";
         var x = "The anchor part is now: " + location.hash;
         document.getElementById("tutorial1").innerHTML = x;
      }
      function mytutorial() {
         alert("Changed The Anchor Part");
      }
   </script>
</body>
</html>

脚本执行时，将生成一个输出，在网页上显示文本和点击按钮。

当用户尝试点击按钮时，事件会被触发，并更改锚点部分，并在网页上显示警报。

使用 addEventListener() 方法

EventTarget 接口的 addEventListener() 方法创建一个函数，每次将提供的事件发送到目标时都会调用该函数。常见的目标包括 Element 或其后代、Document 和 Window，但任何支持事件的对象都可以用作目标(例如 XMLHttpRequest)。

示例

下面我们将 onhashchange 属性与 addEventListener() 方法结合使用。

<!DOCTYPE html>
<html>
<body>
   <p>Click Button To Change Anchor Part</p>
   <button onclick="tutorial()">Click</button><br><br><br>
   <p id="tutorial1"></p>
   <script>
      function tutorial() {
         location.hash = "TUTORIALSPOINT";
         var x = location.hash;
         document.getElementById("tutorial1").innerHTML = "The anchor part is now: " + x;
      }
      window.addEventListener("hashchange", mytutorial);
      function mytutorial() {
         alert("Anchor Part Has Changed!");
      }
   </script>
</body>
</html>

运行上述脚本后，输出窗口会弹出，并在网页上显示文本和按钮。

如果用户尝试点击按钮，则会触发事件，更改锚点部分并在网页上显示警报。