bom的总结3:history对象
2018-01-14 本文已影响0人
我不是大熊
history对象
history对象保存着用户的上网记录,使用go()方法可以在上网记录中前进后退:
1.基本操作
history.go(0);//刷新
history.go(1);//前进
history.forward();//同上
history.go(-1);//后退
history.back();//同上
history.go('http://baidu.com');//跳转到最近的http://baidu.com页面,不定是前进还是后退,取最近
2. history.pushState
//检测是否支持history
if(!!(window.history && history.pushState)){
console.log('支持history api');
}else{
console.log('不支持history api');
}
//pushState方法3个参数:①state:状态对象,会传入popstate的回调函数中;②title:标题,目前浏览器都忽略,可忽略,③url:地址栏将显示的地址,不能跨域
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
//总之,pushState方法不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应
3.history.replaceState
//replaceState的参数和pushState一样,区别是它修改浏览历史中当前纪录,而不是添加
history.replaceState({page:1},"page1","page1.html");
4.history.state属性
console.log(history.state);//如果没有,将返回null
5.popstate事件
//每当同一个文档的浏览历史(即history对象)出现变化(只有当前进、后退的时候才会,比如用户点击前进后退按钮,比如js调用go(-1)/back()/forward时,就会触发popstate事件。
window.onpopstate = function (event) {
console.log('location: ' + document.location);
var state = JSON.parse(JSON.stringify(event.state));
};
history.pushState({page:3},"page3","#");
history.back();
6.URLSearchParams API
因为兼容性问题,暂时先不讨论这个,在location当中已经实现过怎样获取查询字符串参数了。