HTML5历史状态管理history API-pushState/replaceState与popstate事件

tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و

【本文源址:http://blog.csdn.net/q1056843325/article/details/60607402 转载请添加该地址】

AJAX技术对我们前端产生了巨大影响
可以让我们的页面无刷新操作减少网络请求
但是它也产生了一些问题
不能够使用浏览器的前进与后退
(后退是浏览器非常常用的按钮)

很久很久以前,Gmail借助iframe解决了这个问题
但现在,HTML5提供了超级简单的API

#pushState与onpopstate
history.pushState(stateObject, title, url)
包含三个参数
分别是状态对象、新状态标题和可选参数相对URL
第一个参数状态对象应该传入提供页面状态信息的数据
第二个参数还没有浏览器实现
添加也没有什么用,所以可以传入一个空字符串
如果使用了第三个参数,那么执行这个函数后,浏览器地址也会更新
但是不会真的向服务器发送请求

当我们从状态栈中的一个状态跳到另一个状态popstate事件就会触发
(浏览器前后翻页触发,刷新页面不触发)
它的事件对象中有一个state属性存储着当初传递给pushState()的状态对象

下面通过一个小例子来解释一下

<button id="next">下一页</button>
当前页数:<span id="cur">0</span>

要实现点击下一页,然后当前页数对应增加

var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0; //表示当前页数
next.onclick = function(){
  page++;
  cur.innerHTML = page;
}

这时我们还不能使用浏览器的上下翻页


现在使用history API来添加一些代码

var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
  page++;
  history.pushState({page: page}, '','?page=' + page);
  //状态对象中存储当前页数
  cur.innerHTML = page;
}
window.onpopstate = function(e){
  if(e.state){
    cur.innerHTML = e.state.page;
  }else{
    cur.innerHTML = 0;
  }
}

当点击“后退”按钮回到最开始时(第0页)
因为没有状态,所以e.state值为null

#replaceState
除此之外还有一个API用于更新状态
参数与pushState()前两个参数相同
调用这个方法就会重写当前的状态
也就是说替换当前的记录

<button id="next">下一页</button>
<button id="update">更新样式</button>
当前页数:<span id="cur">0</span>
var next = document.getElementById('next');
var update = document.getElementById('update');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
  page++;
  history.pushState({page: page}, '','?page=' + page);
  cur.innerHTML = page;
}
update.onclick = function(){
  history.replaceState({page: history.state.page + '(已读)'},'');
  //部分浏览器实现了history.state返回当前状态
}
window.onpopstate = function(e){
  if(e.state){
    cur.innerHTML = e.state.page;
  }else{
    cur.innerHTML = 0;
  }
}


HTML5历史状态管理只有简单的几个函数
短短几行代码,就可以增加状态记录的功能
现在各个浏览器都实现了这个功能

主页传送门

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

刻刻帝丶

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值