数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
广告