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. Oracle 11.2.0.1的一个Bug，客户端报ORA-03113: 通信通道的文件结尾

    半小时前,一个项目反馈应用系统部分功能报错,ORA-03113: 通信通道的文件结尾.好像是个常见的错误. 异常信息:ORA-03113: 通信通道的文件结尾 进程 ID: 2392 会话 ID: 2 ...

  2. java1234教程系列笔记 S1 Java SE 0101 HelloWorld

    本节分为三讲.java概览,第二节讲了安装jdk 配置环境变量 第三节讲了经典的hello world 1.新建一个txt文本 public class chapter0102{ public sta ...

  3. Microsoft Visual Studio 2013 Update 5 direct download link for full ISO

    From:http://www.nickdu.com/?p=604 Visual Studio 2013 Update 5 is now released and maybe you are also ...

  4. Shiro简单配置

    注:这里只介绍Spring配置模式. 因为官方例子虽然中有更加简洁的ini配置形式,但是使用ini配置无法与spring整合.而且两种配置方法一样,只是格式不一样. 涉及的jar包 核心包shiro- ...

  5. tomcat与oracle关于8080端口的冲突

    http://blog.csdn.net/baidu_24256693/article/details/44863935 由于电脑里同时安装了tomcat与oracle,所以8080的端口是冲突的. ...

  6. Kylin Java RESTful API

    最近在做大数据方面的开发, 学习研究了一段时间的kylin系统, 对于前端开发需要使用 RESTful API ,但是官网并没有提供详细的Java  API. 经过几天的看文档,最终写出了 Java ...

  7. mysql删造成表死锁研究

    现在互联网公司对于代码的管理越来越规范,一般都会有3个环境:开发环境,测试环境,正式环境.在开发环境进行开发,开发完成后将代码提交到测试环境进行测试,测试完毕后上线到正式环境. 今天在正式环境上遇到一 ...

  8. JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址

    在写java程序时不可避免要获取文件的路径...总结一下,遗漏的随时补上 1.可以在servlet的init方法里 String path = getServletContext().getRealP ...

  9. sysbench压力测试工具简介和使用(二)

    sysbench压力测试工具使用: 2.1    测试数据库服务器的硬件配置信息如下: CPU:      24核心线程数,Intel(R) Xeon(R) CPU E5-2620 0 @ 2.00G ...

  10. [手机取证] Apple Watch取证初探

    转载文章请注明出处 1. 关于Apple Watch 苹果公司在2015年3月正式发布了智能手表Apple Watch,包括Apple Watch.Apple Watch Sport以及Apple W ...