javascript:history.go()和History.back()的区别及应用

下面是“javascript:history.go()和History.back()的区别及应用”的完整攻略。

什么是history.go()和history.back()？

history.go()和history.back()是JavaScript中操作浏览器历史记录的方法，它们都属于浏览器对象的一部分，即window.history对象。其中，history.go()方法用于加载浏览器历史记录中的某一个特定页面，而history.back()方法用于加载浏览器历史记录中上一个页面。

history.go()方法

语法格式

history.go(number) 或 history.go(url)

其中，number表示要返回浏览器历史记录中的某一个具体页面，可以是一个正数或负数，分别表示向前或向后跳转。例如，history.go(-1)即为返回上一页，history.go(1)即为加载下一页。如果要加载浏览器历史记录中的某一个具体url，则需要传入完整的url字符串，例如history.go('https://www.baidu.com')。

示例1

<input type="button" value="跳转到百度" onclick="history.go('https://www.baidu.com')">

上述代码中，当点击按钮时，将会跳转到百度首页。

示例2

function goBack() {
  history.go(-1);
}

上述代码中，定义了一个函数goBack()，在该函数中使用history.go(-1)方法返回上一页。通过将该函数挂载到页面的某个元素上，即可实现返回功能。

history.back()方法

语法格式

history.back()

该方法不需要传入参数，直接调用即可返回上一页。

示例1

<input type="button" value="返回上一页" onclick="history.back()">

上述代码中，当点击按钮时，将会返回上一页。

示例2

window.onkeydown = function(event) {
  switch(event.keyCode) {
    case 8:
      history.back();
      break;
  }
}

上述代码中，使用window.onkeydown监听页面的键盘事件，在按下“退格”键时调用history.back()方法返回上一页。这样可以提高页面用户体验。

总结

通过本文的详细讲解，我们了解了history.go()和history.back()的使用方法和区别。在页面开发中，根据实际需要合理使用这两个方法，可以帮助我们更好地操作和控制页面历史记录。