【JS】监听URL的hash变化

Regulations

已于 2023-06-02 10:58:28 修改

阅读量1.6k

点赞数 1

文章标签： javascript 开发语言

于 2023-05-04 14:00:57 首次发布

本文链接：https://blog.csdn.net/Regulations/article/details/130485525

版权

该代码示例展示了如何使用JavaScript监听URL的hash部分变化，并根据hash值更新页面内容。通过handleHashChange函数处理hashchange事件，提取路由信息，并调用updatePage函数来改变页面上的<h1>标签内容，模拟页面路由切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>js 监听 url hash 变化</title>
	</head>
	<body>
		<h1>index/index</h1>
		<a href="#/index/index">index</a>
		<a href="#/index/home">Home</a>
	</body>
	<script>
		// 定义一个update函数，用于更新页面内容
		function updatePage(route) {
			console.log('更新页面：' + route);
			// 在这里更新页面内容
			var h1 = document.querySelector('h1');
			// 更改 h1的内容
			h1.textContent = route;
		}

		// 定义一个处理函数，用于监听hash页面变化事件
		function handleHashChange() {
			// 获取当前的哈希部分
			var hash = window.location.hash.slice(1);
			var queryStringIndex = hash.indexOf('?');
			// 提取带有查询字符串的路由部分
			var routeWithQuery = queryStringIndex !== -1 ? hash.slice(0, queryStringIndex) : hash; 
			// 提取纯路由部分
			var route = routeWithQuery.split(/[&;]/)[0]; 
			// 分割路由部分
			var parts = route.split('/').slice(1);
			// 过滤掉空字符串元素
			parts = parts.filter(function(part) {
				return part !== '';
			});
			if (parts.length === 0) {
				parts = ['index', 'index'];
				window.location.hash = '#/' + parts.join('/');
			}
			var routeWithoutQuery = parts.join('/');
			updatePage(routeWithoutQuery);
		}

		// 在页面加载时调用一次handleHashChange函数，以便处理当前路由部分
		handleHashChange();

		// 监听hashchange事件，当hash页面发生变化时调用handleHashChange函数
		window.addEventListener('hashchange', handleHashChange);
	</script>
</html>