window.history window.history 方法总结

各位老铁们，大家好，今天由我来为大家分享window.history，以及window.history 方法总结的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

window.history 方法总结

使用History

一、历史记录概览

二、添加和修改历史记录条目：

两种方法都允许我们添加和更新历史记录，它们的工作原理相同并且可以添加数量相同的参数。除了方法之外，还有popstate事件。在后文中将介绍怎么使用和什么时候使用popstate事件。

pushState()和replaceState()参数一样，参数说明如下：

两个方法的主要区别就是：pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。

使用方法：

1、onpopstate

2、pushState

在history栈中添加一个新的条目

3、replaceState

替换当前的记录值

4、读取当前状态

在页面加载时，可能会包含一个非空的状态对象。这种情况是会发生的，例如，如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。但是，如果你读取 history.state属性，你会得到一个与 popstate事件触发时得到的一样的状态对象。

你可以直接读取当前历史记录条目的状态，而不需要等待popstate事件：

5、浏览器兼容性

window.history 页面栈的回退问题

我们平时再跳转页面时，页面会被保存至页面栈里。每次回退或左滑回退时，会延页面栈依次返回。

那么问题来了，现有场景如下：

从 A页面==》 B页面==》 C页面，但从 C页面返回时，只能返回至 A页面。

即 B页面不记录到页面栈里，那么从 C页面返回时，就会直接返回至 A页面。

如何才能不把 B页面记录在页面栈里呢？

浏览器有个属性： history，里面包含了所有页面的记录栈，但不能修改，只能读取。

跳转页面

我们平时一般都用 window.location.href=' http://xxxxxxxx'来跳转页面，这种方式会把当前页面 push到页面栈里。

其实还有一种方式 window.location.replace(' http://xxxxxxxx')，即把当前页面替换为新页面，其当前页面不会记录到页面栈里。

如在 B页面跳转至 C页面可写为： window.location.replace('页面C')

这时再返回时，会直接返回至 A页面。

但是，好像不能实现，这时浏览器的一个属性 history就起到作用了

再 history里有个方法： replaceState

替换当前浏览器的状态，语法为

history.replaceState(null,'','你想要替换的页面地址')

这俩结合就能实现不保存当前页面至页面栈了

如有更好的办法，欢迎小伙伴评论~~~

javascript:window.history.go(-1)什么意思啊

history是你浏览过的网页的url（简单的说就是网址）的集合，也就是你的浏览器里的那个历史记录。它在js里是一个内置对象，就跟document一样，它有自己的方法，go就是其中一个。

这个方法的参数是一个数字，它指定要定位的url相对当前页面url位置的下标。当前的url下标为0，所以window.history.go(-1)就是要定位到相对当前页面下标为-1的页面，也就是之前刚刚访问的页面。

再举个例子：

你在地址栏访问百度页面（http://www.baidu.com），这时history里就把这个地址加到了它的集合里，并且将下标定为0.

通过搜索，你访问了新浪的页面（http://www.sina.cn），浏览器又将这个网址放在了history里，并将这个网址的下标定为0，而之前访问的百度页面的下标相对于这次访问的新浪页面就变成了-1.

如果接下来你又通过新闻链接打开了网易页面（http://www.163.com），浏览器就会如上一样又把这个网易放到history里，下标为0，而网易之前一个访问的页面新浪，在history里的下标就变成了-1，同理百度的下标就变成了-2.

这时，你通过window.history.go(-1)语句，能使页面定位到当前页面的前一个页面，也就是新浪网，如果你使用的是window.history.go(-2)，就能直接到达百度页面。

总得来说，这句代码的功能就跟你点了浏览器上的返回按钮一样。

怎么实现history.back()返回后刷新历史页面

history.back都是从浏览器缓存读取数据。要刷新就考虑其他代码。

-------------------------------------------------------------------

可以考虑把history.back的步骤分隔，然后重新实现。

如果只通过js来完成，可以考虑以下代码：

//先获取上一个页面，然后再跳转到那个页面

//在绝大部分情况下的效果就是history.back()的刷新版本

window.location.replace(document.referrer)document.referrer:

document.referrer可以引用到上一个页面，这个属性是由浏览器支持的。在不同情况下值可能和history.back不一样，但是绝大部分情况下跟你想要的结果是一致的。

当用户是通过页面导航内部切换到新页面的（例如<a>标签，或者改变url的代码），document.referrer和history.back指向的页面都是上一个页面。

当用户是通过书签打开网页的，document.referrer是空的，history.back却是可用的，可以返回到点击书签之前的页面。

history.back不一定就不会刷新界面：当缓存不可用的时候，还是会刷新的。window.location.replace也不一定会刷新页面，当服务器"明确"告诉浏览器缓存还可以用的时候，浏览器一般不会再刷新页面。不过在一般情况下，使用window.location.replace替换history.back就能达到想要的效果。

所以大可使用window.location.replace(document.referrer)

文章分享到这里，希望我们关于window.history和window.history 方法总结的内容能够给您带来一些新的认识和思考。如果您还有其他问题，欢迎继续探索我们的网站或者与我们交流，我们将尽力为您提供满意的答案。