写一个html代码通过history对象的方法,实现两个页面之前的前进与后退
时间: 2023-11-27 09:54:42 浏览: 38
以下是一个简单的示例代码:
第一页:
```html
<!DOCTYPE html>
<html>
<head>
<title>第一页</title>
</head>
<body>
<h1>第一页</h1>
<p>这是第一页</p>
<button onclick="goToPage2()">去第二页</button>
<script>
function goToPage2() {
// 使用 history 对象的 pushState() 方法来添加新的历史记录条目
history.pushState({}, "", "page2.html");
// 跳转到第二页
window.location.href = "page2.html";
}
</script>
</body>
</html>
```
第二页:
```html
<!DOCTYPE html>
<html>
<head>
<title>第二页</title>
</head>
<body>
<h1>第二页</h1>
<p>这是第二页</p>
<button onclick="goToPage1()">回到第一页</button>
<script>
function goToPage1() {
// 使用 history 对象的 pushState() 方法来添加新的历史记录条目
history.pushState({}, "", "page1.html");
// 跳转到第一页
window.location.href = "page1.html";
}
</script>
</body>
</html>
```
在这个示例中,我们通过 `history.pushState()` 方法来添加新的历史记录条目。当用户点击页面上的按钮时,它会添加一个新的历史记录条目,并且跳转到另一个页面。
用户可以使用浏览器的前进和后退按钮来导航到之前访问过的页面。当用户点击这些按钮时,浏览器会自动更新当前页面的 URL,然后使用 `history.pushState()` 方法来添加一个新的历史记录条目。我们不需要编写任何额外的代码来处理这些操作,因为浏览器会自动处理它们。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)