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. php excel读取

    当然首先要判断是否有文件和文件类型,接着把文件保存到某个路径中 /** * 读取excel数据 * @author Red * @date * @param $filename 文件所在路径+文件名 ...

  2. Oracle 使用SqlPlus管理

    Oracle 使用SqlPlus 安装,一键安装,很简单.安装过程,一定要记住密码 一.登陆sqlplus 连接本地服务器,可以直接,打开cmd: 可以直接不用登陆,如果登陆需要输入用户名.密码. s ...

  3. Elasticsearch【JAVA REST Client】客户端操作

    ES系统作为集群,环境搭建非常方便简单. 现在在我们的应用中,如何对这个集群进行操作呢? 我们利用ES系统,通常都是下面的架构: 在这里,客户端的请求通过LB进行负载均衡,因为操作任何一个ES的实例, ...

  4. .NET(C#)中的DataSet、string、DataTable等对象转换成Json

    ConvertJson.cs类 using System; using System.Collections.Generic; using System.Text; using System.Data ...

  5. Tencent://Message/协议的实现原理

    腾讯官方通过 Tencent://Message/协议可以让QQ用户显示QQ/TM的在线状态发布在互联网上:并且点击 XXX  ,不用加好友也可以聊天 官方链接: http://is.qq.com/w ...

  6. mysql-bin引起mysql不能启动

    日志提示无法找到mysql-bin.000005这个文件 原因是我把其删除了,而在mysql-bin.index文件中却还有mysql-bin.000005的记录,因此启动失败了 解决: cd /va ...

  7. 通过宏判断VS编译版本以及系统平台

    MSC_VER 定义编译器的版本.下面是一些编译器版本的_MSC_VER值(参见扩展阅读中的参考文献2的链接) MSVC++ 12.0 _MSC_VER == 1800 (Visual Studio ...

  8. 【学】React的学习之旅1

    React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...

  9. windows服务（installutil.exe)报错。异常来自 HRESULT:0x80131515

    报错如下: System.IO.FileLoadException: 未能加载文件或程序集“file:///G:\WindowsService1\bin\Debug\WindowsService1.e ...

  10. maven详解之生命周期与插件

    Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...