数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何在 HTML 中 URL 的锚点部分发生更改时执行脚本？
在这篇文章中，我们将学习如何在 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>
运行上述脚本后，输出窗口弹出并在网页上显示文本和按钮。
如果用户尝试单击按钮，事件将被触发，更改锚点部分并在网页上显示警报。
更新于：2022-12-16
333 次浏览
广告