有趣的API: history pushState/popstate 无刷新跳转
摸鱼逛知乎看到这么一个问题
这个API看起来貌似很厉害的样子,搜搜看
不得不说,张鑫旭真的厉害。
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
,利用ajax
和 pushState
做成的和多页应用体验一致的SPA。github项目地址
现代路由框架的H5模式。
路由器的无刷新跳转也是利用该api
完成的。另外,由于url
变化,在用户复制分享时候由于路由未定义会出错,所以还需要服务端进行重定向处理。
引用资料:
相关推荐
renshuguo 2020-06-24
yuzhongdelei0 2020-06-13
Yyqingmofeige 2020-05-16
haohong 2020-04-08
tanyhuan 2020-03-01
kuwoyinlehe 2020-01-02
zlsh00 2019-12-29
85407718 2019-12-06
81487308 2018-09-08
Aveiox 2018-06-11
80437700 2019-05-31
81427605 2019-05-21
89477009 2018-12-23
81487308 2019-09-04
84307063 2018-09-27
DBATips 2018-01-26
heroxsx 2013-02-23
zousongshan 2012-09-08
Andyshrk 2012-07-31