前言

这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理。局部刷新很容易实现,ajax可以满足我们的需要,但是这并不会产生历史管理,好在html5给我们提供了几个好用的api方便解决这个问题,见下文。

正文

一、API

1、pushState

pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。
state:与要跳转到的URL对应的状态信息。
title:空字符串(以后可能有用)。
url:要跳转到的URL地址,不能跨域。

作用:将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

2、replaceState

history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3、window.onpopstate

history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

二、实现

场景很简单,点击按钮下面的div中出现不同的图片及标题,使用ajax刷新,并且产生历史管理。

<p class="page">
  <a href="javascript:;">[ <span>1</span> ]</a>
  <a href="javascript:;">[ <span>2</span> ]</a>
  <a href="javascript:;">[ <span>3</span> ]</a>
  <a href="javascript:;">[ <span>4</span> ]</a>
</p>
<div>
  <img />
  <p class="title"></p>
</div>

核心代码

  function setUrl(page){
    var url = location.pathname + '"htmlcode">
  (function(){
    //默认显示第一页
    var url = location.pathname + '"htmlcode">
  window.addEventListener('popstate',function(){
    var page = getPage();
    xhr(page);
  })

大体的骨架就是这样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com