history / hash
时间: 2023-11-21 21:58:51 浏览: 47
根据提供的引用内容,可以得知history和hash都是浏览器URL的两种模式。其中,history模式是指URL中没有#号,而hash模式是指URL中有#号,并且#号后面的字符被称为hash值。
下面是一个简单的演示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>History/Hash演示</title>
</head>
<body>
<h1>History/Hash演示</h1>
<ul>
<li><a href="#hash">Hash模式</a></li>
<li><a href="/history">History模式</a></li>
</ul>
<div id="content"></div>
<script>
// 监听URL变化
window.addEventListener('hashchange', function() {
var content = document.getElementById('content'); content.innerHTML = '当前是Hash模式';
});
window.addEventListener('popstate', function() {
var content = document.getElementById('content');
content.innerHTML = '当前是History模式';
});
</script>
</body>
</html>
```
在这个演示中,我们创建了两个链接,一个使用hash模式,一个使用history模式。当用户点击链接时,页面的URL会发生变化,同时页面上方会显示当前的模式。在这个演示中,我们使用了JavaScript的hashchange和popstate事件来监听URL的变化。