HTML5-原生History

更多内容，访问:

history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath

history

浏览器历史记录对象

属性:

• length: 历史记录对象长度

方法:

• go(n):

  跳转到相应的历史记录，以当前历史记录为标准线0，回到之前历史记录，为负值，比如回到上一页，n就是-1，向后，就是正值，如果n === 0，相当于刷新当前页面。

• back():

  回到上一页，相当于浏览器后退按钮，也可以用go(-1)实现

• forward():

  前进到下一页，相当于浏览器前进按钮，也可以用go(1)实现

HTML5 对 History API 新增的两个方法：pushState()、replaceState()，均具有操纵浏览器历史记录的能力

• history.pushState(state, title, url)

  • state：用于存储该 url 对应的状态对象，可以通过 history.state 获取
  • title：标题，目前浏览器并不支持
  • url：定义新的历史 url 记录，需要注意，新的 url 必须与当前 url 同源，不能跨域

  pushState 函数会向浏览器的历史记录中添加一条，history.length 的值会 +1，当前浏览器的 url 变成了新的 url。需要注意的是：仅仅将浏览器的 url 变成了新的 url，页面不会加载、刷新。

• replaceState:

  replaceState 的使用与 pushState 非常相似，都是改变当前的 URL，页面不刷新。区别在于 replaceState 是修改了当前的历史记录项而不是新建一个，history.length 的值保持不变。

监听事件

1. popstate事件

每当history对象出现变化时，就会触发popstate事件。

通过 a 标签或者 window.location 进行页面跳转时，都会触发 window.onload 事件，页面完成渲染。点击浏览器的后退键或前进键，根据浏览器的不同机制，也会重新加载（Chrome 浏览器），或保留之前的页面（Safari 浏览器）。而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录，点击浏览器的后退键或前进键页面是没有反应的，那该如何控制页面渲染呢？为了配合 history.pushState() 或 history.replaceState()，HTML5 还新增了一个事件，用于监听 URL 历史记录改变：window.onpopstate()。

注意事项：

• 仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件;

• 只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发；

• 单纯的a标签不会触发；

• 另外，上面浏览器回退和前进事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。页面第一次加载的时候，浏览器不会触发popstate事件。使用的时候，可以为popstate事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象；

2. hashchange事件

每当hash值发生变化时，就会触发hashchange事件，hash值的变化也会触发popstate事件

注意事项:

• 仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件;

• 另外，上面浏览器回退和前进事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。页面第一次加载的时候，浏览器不会触发hashchange事件。使用的时候，可以为hashchange事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象。

代码007普通

打赏 收藏 海报 链接