window.history.
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从HTML5开始——提供了对history栈中内容的操作。
window.history.back(); 浏览器回退操作
window.history.forward(); 向前跳转
window.history.go(-1); 向后移动一个页面 (等同于调用 back()):
window.history.go(1);
向前移动一个页面, 等同于调用了 forward():
window.history.length 查看历史堆栈中页面的数量
document.referrer
Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的.
如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。由于该属性只是返回一个字符串,所以不能够通过该属性引用页面的 DOM。
在中,Document.referrer 会初始化为父窗口Window.location的href。
返回操作的问题整理
在很多时候会使用history.back(-1)作为页面的返回操作实现,这个使用上是没有问题,每次回退到上一个操作历史,但是如果当用户进行了上图的操作,同时打开多个标签或者页面,此时用户点击之前打开的标签并点击返回按钮,执行history.back(-1),那么此时执行回退操作的不会是当前的页面而是最后打开的标签页面,当前页面会出现无反应的状态,这个在实际使用中一定要特别注意,针对该问题,可以使用document.referrer代替浏览器历史的返回操作,而是获取当前页面的跳转前地址,通过 window.location.href = document.referrer;来进行当前页面的回退操作
/**
*
* 页面返回
*/
function goBack() {
if(document.referrer.length > 0){
window.location.href = document.referrer;
}
else{
history.back(-1)
}
}