📌  相关文章
📜  html 页面后退按钮 (1)

📅  最后修改于: 2023-12-03 14:41:57.353000             🧑  作者: Mango

HTML 页面后退按钮

在网页中，后退按钮可以帮助用户方便地回到上一个访问过的页面。HTML 提供了一些属性和方法来实现后退功能。

使用历史对象

HTML5 提供了一个 history 对象，可以记录用户访问的历史记录，并提供了一些方法可以用来操作历史记录。

<button onclick="goBack()">返回</button>
<script>
function goBack() {
  window.history.back();
}
</script>

以上代码创建了一个按钮，点击按钮时会触发 goBack() 方法，该方法使用 history.back() 方法返回到上一个访问过的页面。

  • history.back() 方法会返回上一个访问过的页面。如果用户还没有访问过页面，该方法不会有任何效果。
  • history.forward() 方法可以让用户前进到下一个访问过的页面。
  • history.go() 方法可以前进或后退指定的步数。例如，history.go(-2) 可以让用户后退两步。
使用浏览器对象

除了使用历史对象外，还可以使用一些浏览器对象提供的方法来实现后退功能。

<button onclick="goBack()">返回</button>
<script>
function goBack() {
  window.history.length > 1 ? window.history.go(-1) : window.location.href = '../index.html';
}
</script>

以上代码在 goBack() 方法中使用了 history.length 属性来判断历史记录的长度。如果历史记录长度大于 1，说明存在上一个访问过的页面，可以使用 history.go(-1) 方法返回上一个页面。

如果历史记录长度为 1，说明当前页面是第一个页面，没有上一个页面可以返回，此时可以将页面重定向到网站的首页或其他页面。

注意事项

  • 由于浏览器限制，不能通过 JavaScript 直接触发浏览器的返回功能。按钮或其他元素必须触发 JavaScript 方法，由 JavaScript 调用浏览器的返回功能。

  • 对于复杂的单页应用程序，使用浏览器对象的方法可能会造成很多问题。在这种情况下，建议使用框架或库来管理路由。

参考链接