1.html5 history api适用场景，个人理解最大的用处是配合ajax使用，使ajax拥有回退、前进的用户体验。

2.代码(dive into html5中的一个小例子)

1）fer.html

<!DOCTYPE html>

<html>

   <head>

       <title>history api test</title>

   </head>

   <body>

      <aside id="gallery">

          <p class="photonav">

              <a id="photonext" href="casey.html">Next &gt;</a>

              <a id="photoprev" href="adagio.html">&lt;Previous</a>

          </p>

          <figure id="photo">

              <img id="photoimg" src="gallery/1.jpg" alt="fer" width="500" height="375">

              <figcaption>Fer.1972</figcaption>

          </figure>

      </aside>

   <script>

       function setupHistoryClicks(){

           addClicker(document.getElementById("photonext"));

           addClicker(document.getElementById("photoprev"));

       }

       function addClicker(link){

           link.addEventListener("click",function(e){

               swapPhoto(link.href);

               history.pushState(null,null,link.href);

               e.preventDefault();

           },false);

       }

       function swapPhoto(href){

           var req=new XMLHttpRequest();

           req.open("GET",href.split("/").pop(),false);

           req.send(null);

           if(req.status==200){

               document.getElementById("gallery").innerHTML=req.responseText;

               setupHistoryClicks();

               return true;

           }

           return false;

       }

       setupHistoryClicks();

       window.addEventListener("popstate",function(e){

           swapPhoto(location.pathname);

       })

   </script>

   </body>

</html>

2)casey.html

<aside id="gallery">

    <p class="photonav">

        <a id="photonext" href="adagio.html">Next &gt;</a>

        <a id="photoprev" href="fer.html">&lt;Previous</a>

    </p>

    <figure id="photo">

        <img id="photoimg" src="gallery/casey.jpg" alt="casey" width="500" height="375">

        <figcaption>casey.1972</figcaption>

    </figure>

</aside>

3) adagio.html

<aside id="gallery">

    <p class="photonav">

        <a id="photonext" href="fer.html">Next &gt;</a>

        <a id="photoprev" href="casey.html">&lt;Previous</a>

    </p>

    <figure id="photo">

        <img id="photoimg" src="gallery/1.jpg" alt="fer" width="500" height="375">

        <figcaption>adagio.1972</figcaption>

    </figure>

</aside>

html5 history api的更多相关文章

  1. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  2. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  3. HTML5 History API & URL 重定向

    HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...

  4. HTML5 History API让ajax能回退到上一页

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  5. window.history的跳转实质－HTML5 history API 解析

    在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...

  6. HTML5 history API，创造更好的浏览体验

    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...

  7. 转：HTML5 History API 详解

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  8. 一篇文章图文并茂地带你轻松实践 HTML5 history api

    HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...

  9. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

随机推荐

  1. MySQL 5.7 并行复制实现原理与调优

    MySQL 5.7并行复制时代 众所周知,MySQL的复制延迟是一直被诟病的问题之一,然而在Inside君之前的两篇博客中(1,2)中都已经提到了MySQL 5.7版本已经支持“真正”的并行复制功能, ...

  2. MVC视图请求流程视图

    /*         *视图请求流程         *当接受到home/index请求时         *先去找viewstart.cshtml视图,再去加载index.cshtml视图      ...

  3. Linux监控分析实战-1

    监控概述及5个大指标 cpu mem   内存 io        磁盘交互 load     负载 Network 网络 它们之间关系是相互彼此依赖,任何一个高负载都会到导致其他指标出现问题: 网卡 ...

  4. 优化Select 语句的原则

    优化Select 语句的原则 -摘抄<SQL Server 2005 性能监测与优化> Select 语句是数据库应用系统中最常用的语句之一,Select 语句设计的好坏直接影响到应用程序 ...

  5. Oracle表空间（tablespaces）

    http://www.cnblogs.com/fnng/archive/2012/08/12/2634485.html 我们知道oarcle数据库真正存放数据的是数据文件(data files),Oa ...

  6. oracle之集合操作函数---minus、union、intersect

    集合操作符专门用于合并多条select语句的结果,包括:UNION,UNION ALL,INTERSECT,MINUS.当使用集合操作函数时,需保证数据集的字段数据类型和数目一致. 使用集合操作符需要 ...

  7. Linux系统的压缩技术

    1.常见的压缩文件扩展名 *.Z ---> compress程序压缩的文件. *.gz --->gzip 程序压缩的文件: *.bz2------>bzip2程序压缩的文件: *.t ...

  8. Linux 忘记root密码 的解决办法

    以单用户维护模式登录 先将系统重启, 在读秒时按下任意键进入菜单界面,再仔细看菜单下的说明,按下e就能进入grub的编辑模式,如下 将光标移动到kernel那行, 再次按e进入kernel的编辑界面中 ...

  9. dependencies 和 devDependencies

    npm install node_module –save自动更新dependencies字段值 npm install node_module –save-dev自动更新devDependencie ...

  10. HTTP返回码总结（转）

    HTTP协议状态码表示的意思主要分为五类 ,大体是 :   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~  1×× 保留   2×× 表示请求成功地接收   3×× 为完成请求客户需进一步 ...