极客笔记JavaScript hashchange 事件
hashchange 事件用于识别以井号（#）开始的URL变化。井号（#）标记在URL开始或在URL之后用于将一个URL更改为另一个链接。
语法
以下事件在HTML中使用了脚本标签。我们可以通过函数来观察到用于更改哈希链接的事件。
<body onhashchange = "functionHandler(event)">
//write code.
<script>
Function functionHandler(event){
//write javascript code.
}
</script>
</body>
示例
以下示例展示了在使用不同功能时工作的hashchange事件的事件信息。
示例1
基本的哈希更改事件通过使用javascript功能和location.hash事件一起工作。当哈希链接从一个URL更改为另一个URL时，我们可以收到警报消息。
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<button onclick="changehashUrlPart()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrlPart() {
location.hash = "bodytag";
var x_hash = location.hash;
document.getElementById("demos").innerHTML = "The anchor part is now: " + x_hash;
}
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL ;
alert(msg);
}
</script>
</body>
</html>
输出
数据显示了hashchange事件函数的输出。
示例2
以下示例在页面上使用不同的哈希URL使用hashchange事件。在这里，我们使用id及其引用来处理hashchange事件。在body标签上使用的函数将对每个URL更改进行操作。
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
alert(msg);
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
||
<a href="#Tutorial3">Go to Tutorial 3</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 3 -->
<a id="Tutorial3"></a>
<h3>Tutorial 3</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
输出
该数据显示了hashchange事件函数的输出。
示例3
下面的示例在同一页上使用了一个hashchange事件和不同的哈希URL。我们可以看到当前的URL和旧的URL在同一页上的变化。我们可以通过hashchange事件获取到来自不同哈希的已更改的URL。
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n"
+ "event.newURL= "+ evt.newURL +"\n"
+ "event.oldURL= "+ evt.oldURL ;
alert(msg);
document.getElementById("demos").innerHTML = msg;
}
</script>
</head>
<body onhashchange="functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
输出
该数据显示了hashchange事件函数的输出。
示例4
以下示例使用文档哈希位置来更改值。我们可以通过单击函数来查看文档的URL。
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body onhashchange = "functionHandler(event)">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"> Event Uses with Document Hash Location </p>
<button onclick="changehashUrl()">Try it</button>
<script>
// Using the location.hash property to change the url part
function changehashUrl() {
document.location.hash = "clickFun";
}
function functionHandler(evt) {
var msg = "Hash Changes with the URL! \n";
msg += "The current document location: " + document.location + "\n";
msg += "The current hash URL: " + document.location.hash;
alert(msg);
}
</script>
</body>
</html>
输出
该数据显示了hashchange事件函数的输出。
示例5
以下示例在同一页上使用不同的哈希网址来使用hashchange事件。我们可以看到使用了addEventListner方法来监听hashchange事件。当哈希网址发生改变时，事件会触发对应的函数。该函数在网址的哈希改变时显示输出内容。
<!DOCTYPE html>
<html>
<head>
<title> JavaSCript HashChangeEvent Example </title>
<meta charset="UTF-8">
<style>
.tutorials {
margin-top: 20px;
padding: 4px;
border: 1px solid black;
}
</style>
<script>
window.addEventListener("hashchange", myFunction);
function myFunction() {
document.getElementById("demos").innerHTML = "The the URL hash part has changed!";
}
</script>
</head>
<body id="bodies">
<h2> JavaSCript HashChangeEvent API </h2>
<p id = "demos"></p>
<a href="#Tutorial1">Go to Tutorial 1</a>
||
<a href="#Tutorial2">Go to Tutorial 2</a>
<div class="tutorials">
<!-- Anchor 1 -->
<a id="Tutorial1"></a>
<h3>Tutorial 1</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
<!-- Anchor 2 -->
<a id="Tutorial2"></a>
<h3>Tutorial 2</h3>
Chapter 1 content <br/>
Chapter 2 content <br/>
Chapter 3 content <br/>
</div>
</body>
</html>
输出
这些数据显示了hashchange事件函数的输出。
示例6
基本的hashchage事件与窗口事件一起使用javascript功能可以工作。我们可以使用”window.onhashchange”函数在改变URL后获取信息。
<!DOCTYPE html>
<html>
<body>
<h4> JavaSCript HashChangeEvent API </h4>
<button onclick="changehashPart()">Test</button>
<p id="demos"></p>
<p id="demos1"></p>
<script>
function changehashPart() {
location.hash = "section";
var x_var = location.hash;
document.getElementById("demos").innerHTML = "The URL part is now: " + x_var;
}
window.onhashchange = myhashFunction;
function myhashFunction() {
document.getElementById("demos1").innerHTML = "The Hash URL has changed!";
}
</script>
</body>
</html>
输出
该数据显示了hashchange事件函数的输出。
结论
这些事件适用于多个URL和同一页面上的哈希链接。它有助于维护和操作更改链接的跟踪。