History对象

Amio 发布于2019-08-01 18:32 / 2404人阅读

摘要：方法接收三个参数，依次为一个与指定网址相关的状态对象，事件触发时，该对象会传入回调函数。当前页面的对象，即方法中第一个参数的值。

基本概念

history接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

属性

history.length

history.state

history.scrollRestoration

方法

history.back()

history.forward()

history.go()

history.pushState()

history.replaceState()

history更多属性和方法，请参考MDN链接

history.pushState();

按指定的名称和URL将数据push进会话历史栈桥。
history.pushState()方法接收三个参数，依次为:

state: 一个与指定网址相关的状态对象，poststate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null.

title: 新页面的标题，但是所有浏览器目前都会忽略这个值，因此这里可以填null.

url: 新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

注意事项

参数中url必须和当前页面处在同一个域下，否则会报错。
例如，我在当前index.html中使用该方法，url参数为"https://www.baidu.com".会出现下面的报错信息。

调用了pushState以后，浏览器地址栏会跟随者发生变化，但是页面并不会刷新，只是在路由栈里面增加了一条记录。
随后点击浏览器前进后退箭头，地址栏会有变化，页面不会刷新。但是如果在当前浏览器地址栏重新输入一个地址，然后又返回就会刷新一次地址。举例如下：

当前页面是page1.html,调用pushState(null, null, "page2.html")方法以后,页面地址变为page2.html.然而页面显示的内容依旧是page1.html的内容。此时删掉浏览器地址栏参数，改为"https://www.baidu.com"并回车访问，去到百度页面的时候，然后再点击浏览器返回箭头，将显示page2.html页面内容。
当然，上面在地址栏重新输入一个地址的操作，可以改为任何可以刷新当前页面的操作。比如，window.location.href或者window.location.reload()等等

history.replaceState()

history.replaceState方法的参数和pushState()方法一模一样，区别是它修改浏览历史中当前记录。

history.state

当前页面的state对象，即pushState()方法中第一个参数的值。

popstate事件

每当同一个文档的浏览历史出现变化时，就会触发popstate事件。
需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮或前进按钮，或者使用JavaScript调用back,forward,go方法时才会触发。

使用的时候可以为popstate事件指定回调函数。

window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});

应用

我们知道，Ajax可以实现页面无刷新操作。但是，也会造成另外的问题，即无法前进与后退。
当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pushState）;于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51801.html

history和hash详解

摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。一、history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所...

marser 2019-08-23 17:59 评论0 收藏0
从路由原理出发，深入阅读理解react-router 4.0的源码

摘要：通过前端路由可以实现单页应用本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从的源码出发，深入理解是如何实现前端路由的。执行上述的赋值后，页面的发生改变。 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现...

Miyang 2019-08-23 12:01 评论0 收藏0
从history api看主流框架的路由机制

摘要：前端路由库的作用是改变地址栏，支持浏览器前进后退，并同步路由对应的视图，这里以及其依赖的库说一下路由机制原文地址前提首先简单介绍一下前端路由机制所依赖的事件及对应的事件对于支持新增方法的浏览器，可以通过设置来在浏览器栈中新增一条记录设置时前端路由库的作用是改变地址栏，支持浏览器前进、后退，并同步路由对应的视图，这里以react-router及其依赖的history库说一下路由机制原...

Lyux 2019-08-26 11:36 评论0 收藏0
history和hash，vue-router

摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。 history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页...

godiscoder 2019-08-23 18:07 评论0 收藏0
JS中最容易被轻视的对象----location和history

摘要：最近开始移动端页面的时候，被和坑了一把，于是决定对这两个对象进行一个全面的剖析。但出于隐私方面的原因，对象不再允许脚本访问已经访问过的实际。唯一保持使用的功能只有和方法。华为执行完之后，我们发现不能回退了，是不是就跟实现同样的效果了。最近开始移动端页面的时候，被window.location和window.history坑了一把，于是决定对这两个对象进行一个全面的剖析。下面进行我们的...

xumenger 2019-08-20 16:29 评论0 收藏0