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: http://127.0.0.1:5501/30-dispatchEvent.html#2
{a: 1, b: 2}
在这里pushState和popState才建立了联系,popState存储了pushSatte的state备份,在事件里的state里放着
更多推荐
【js/css】pushState和popState简明教程
发布评论