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. Unity进阶技巧 - 动态创建UGUI

    前言 项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中找到了方法,趁着记忆犹新,写下动态创建UGUI的方法,供需要的朋友参考 你将学到什么? ...

  2. C#中dynamic的正确用法

    C#中dynamic的正确用法  http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...

  3. ruby 中%Q %q %W %w %x %r %s的用法

    %Q 用于替代双引号的字符串. 当你需要在字符串里放入很多引号时候, 可以直接用下面方法而不需要在引号前逐个添加反斜杠 (\") >> %Q(Joe said: "Fr ...

  4. INF文件的安装/卸载命令

    RunDll32 advpack.dll,LaunchINFSection C:\Windows\INF\Office~1.inf,Uninstall,5

  5. Codeforces Round #377 (Div. 2) D. Exams(二分答案)

    D. Exams Problem Description: Vasiliy has an exam period which will continue for n days. He has to p ...

  6. ORA-01747: user.table.column, table.column 或列说明无效

    Oracle.DataAccess.Client.OracleException ORA-01747: user.table.column, table.column 或列说明无效 原因1: 查了一下 ...

  7. 个人JS零碎知识整理

    1."DOM2级事件"规范要求的事件流包括三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段 2.isNaN()       数字.空串.空格 返回false 变量是数字时返回fa ...

  8. GNOME编辑器--gedit 构建基本脚本

    gedit factorial.sh myprog.c 当你启动gedit外带多个文件时,它会将所有的文件都加载到不同的缓冲区并在主编辑器窗口中按标签化的窗口来显示每个文件. shell脚本的关键在于 ...

  9. java byte&0xFF

    做串口端口通讯时,数据都是以byte类型发送的 普通的byte范围是-128-127,而java的byte范围是0-255 因此将数据的byte转成java的byte时,需要与0xff(1111111 ...

  10. js实现的点击div区域外隐藏div区域(转)

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...