html5通过history实现不刷新跳转页面,静态改变url地址

2019.08.31 20:57 阅读 0

有时候可能需要不刷新页面而改变url地址,在全局变量history里面存在pushStatereplaceState,这两个方法可以手动改变history会话记录历史。

示例:

// 控制台运行
window.history.pushState({foo:'bar'}, 'title', '/kkfor')
// url地址变为kkfor.com/kkfor
// 控制台history  {length: 3, scrollRestoration: "manual", state: {foo: "bar"}}

用法

history.pushState(stateObject, title, url)

  • 主要在不刷新页面url地址的情况下,在history中新增一条记录

pushState接收三个参数

1. stateObject

必选,传入的history下state对象的值。

在history下有一个state属性,可以打开控制台输入history,输出的对象中state为null,则表示没有设置state。

// 打开控制台输入`history`
{length: 2, scrollRestoration: "auto", state: null}

2. title

必选,设置网页的title,目前几乎没有浏览器支持此属性,可以设置一个空。

3. url

可选,此参数为要改变后的url地址,不指定参数,则为当前页面url地址。

注:如果url带域名,则域名地址必须与当前域名同源,所以一般不需要带域名/kkforkkfor

history.repalceState(stateObject, title, url)

  • 在不刷新页面url地址的情况下,替换history中的当前地址,具体参数用法同pushState相同。