【jscss】pushState和popState简明教程

admin管理员组

文章数量:1794759

【js/css】pushState和popState简明教程

pushState和replaceState

h5中提供了只修改地址栏、不修改页面内容的api:

• pushState(添加浏览历史),
• replaceState(修改当前浏览历史)，

popState事件在用户返回或前进进会被出发触发 history.pushState方法接受三个参数，依次为： state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据 title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。 url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。 history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

popState的触发

仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。 此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state 判断浏览器是否支持这些api,并添加一些记录,如下添加三个

history.pushState('#1', null, '#1'); history.pushState({ a: 1, b: 2 }, null, '#2'); history.pushState('#3', null, '#3'); window.onpopstate = function(event) { console.log('location: ' + document.location); console.log(event.state); }; //另一种添加事件的方法 window.addEventListener('popstate', function(event) { console.log('location: ' + document.location); console.log(event.state); }); history.go(-1)//触发popstate

输出：

location: 127.0.0.1:5501/30-dispatchEvent.html#2 {a: 1, b: 2}

在这里pushState和popState才建立了联系，popState存储了pushSatte的state备份，在事件里的state里放着

本文标签： 简明教程cssjspopState