JavaScript hashchange 事件

2025年3月18日 | 阅读 5 分钟

hashchange 事件用于识别 URL 以井号 (#) 开头的变化。井号 (#) 标签位于 URL 的开头或紧随 URL 之后，用于将一个链接更改为另一个链接。

语法

以下事件在 HTML 的 script 标签中使用。我们可以看到事件通过函数来改变井号链接。

<body onhashchange = "functionHandler(event)">
//write code.
<script>
Function functionHandler(event){
//write javascript code.
}
</script>
</body>

示例

以下示例展示了 hashchange 事件在不同功能下的工作信息。

示例 1

基本的 hash charge 事件通过 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

以下示例在同一页面上使用了 hashchange 事件来处理不同的 hash URL。在这里，我们使用 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 事件来处理不同的 hash URL。我们可以看到在单个页面上进行当前 URL 和旧 URL 的更改。我们可以通过 hashchange 事件来了解不同 hash 引起的 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 事件函数的输出。

Example4

以下示例使用文档的 hash 位置来更改值。我们可以通过 click 函数看到文档的 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 事件来处理不同的 hash URL。我们可以看到 addEventListener 方法与 hashchange 事件一起使用。事件通过函数工作。当 URL 的 hash 发生变化时，函数会显示输出。

<!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 事件工作。我们可以通过 "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 和 hash 链接上工作。它有助于维护和操作更改链接的跟踪。

下一主题JavaScript 中的 Oninput 函数

JavaScript hashchange 事件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript hashchange 事件

语法

示例

结论

相关帖子

Javascript previousElementSibling 属性

JavaScript scrollIntoView

JavaScript 中的随机图像生成器

JavaScript Window close 方法

npm Install 命令

JavaScript 中的事件冒泡和捕获

JavaScript onbeforeunload 事件

JavaScript 动画

如何在 JavaScript 中发出蜂鸣声

JavaScript 中的涟漪效果

订阅 Tpoint Tech

联系信息

关注我们

教程