有趣的API: history pushState/popstate 无刷新跳转

huangliuyu00 2019-06-21

摸鱼逛知乎看到这么一个问题

有趣的API: history pushState/popstate 无刷新跳转

这个API看起来貌似很厉害的样子,搜搜看

有趣的API: history pushState/popstate 无刷新跳转
不得不说,张鑫旭真的厉害。

API介绍

首先看看API如何使用:

  • history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录。

    • state(any) 需要保存的数据,这个数据在触发popstate事件时保存在event.state上。

    • title(string):

    Firefox 目前忽略了這個參數,雖然他以後有可能會採用。如果以後改變了這個作法,傳送空白的字串應該還會是安全的。另外,你可以傳送一個短的標題來敘述你想要到的state。
    目前没有发现有地方保存这个title,推测是state的说明?

    • url(string) 需要更改的url地址。

    • ps:pushState 需要至少两个参数。

  • popstate: 浏览器点击前进后退时触发的事件。event.state可以获取当前url下设置的state

另外获取pushState中设置的state不一定要在popstate事件中获取,直接history.state也可以拿到。

补充内容

pjax

pjax,利用ajaxpushState做成的和多页应用体验一致的SPA。github项目地址

现代路由框架的H5模式。

路由器的无刷新跳转也是利用该api完成的。另外,由于url变化,在用户复制分享时候由于路由未定义会出错,所以还需要服务端进行重定向处理。

引用资料:

  1. 张鑫旭:ajax与HTML5 history pushState/replaceState实例

  2. mdn文档

相关推荐