HTML5的Histroy API

History API在各浏览器下的支持情况：

不支持

4.0+

5.0+

8.0+

不支持

比较典型的是GitHub，在点击代码文件夹和文件时，会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了（跟新开了一个新页面感觉一样），但体验起来很平滑（外层框架的内容没有重新加载，例如：登录信息、是否关注主人等），然后是ajax载入新内容。

history在HTML4的时代里，有如下几个方法和属性，应该很熟悉：

length、back()、forward()、go([delta])

在HTML5中又添加了两个方法：

pushState(data, title[,url])、replaceStage(data, this [,url])

需要注意的是在使用replaceStage，传入的url必须和当前页的协议、所在域完全相同（即使不同的子域都不行），否则会提示安全错误。

更多内容可以参考：

http://diveintohtml5.org/history.html

http://dev.w3.org/html5/spec-author-view/history.html

如果想在兼容其它老浏览器，可以使用History.js

这里写了一个测试实例，参考至：http://html5demos.com/history

因为URL变换了，而在刷新的时候页面又不能进行跳转，此时需要在自己的web服务器上写一些规则了（我本机使用的是nginx），在server_name为meteoric.com的vhost中添加如下规则：

location ~ ^/history/.*$ {
rewrite ^/history/.*$ /html5/history/index.html last;
}

页面访问路径是：http://meteoric.com/history/

这样即使我刷新页面，所有以history开头的请求，都将转至http://meteoric.com/history/index.html

/=======/

1、因为页面没有跳转，所以在点击链接的时候可以使用ajax请求并渲染数据（类似github的效果）

2、进页面，可以获取到当前URL，然后正则取出histroy其后的内容，判定加载哪一种资源

页面完整的HTML代码：

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=620" /> <title>HTML5__History API</title> <style>body {   font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;  background: rgb(237, 237, 236);  margin: 0;  margin-top: 40px;  padding: 0;}

section, header, footer {  display: block;}

#wrapper {  width: 600px;  margin: 0 auto;  background-color: #fff;  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;  border-top: 1px solid #fff;  padding-bottom: 76px;}

h1 {  padding-top: 10px;}

h2 {  font-size: 100%;  font-style: italic;}

header, article > *, footer > * {  margin: 20px;}

footer > * {  margin: 20px;  color: #999;}

#status {  padding: 5px;  color: #fff;  background: #ccc;}

#status.fail {  background: #c00;}

#status.success {  background: #0c0;}

#status.offline {  background: #c00;}

#status.online {  background: #0c0;}

li {  margin-bottom: 10px;}

#examples {  padding-left: 20px;}#examples li {  list-style: square;  padding: 0;  margin: 0;}</style> </head>

<body>

<section id="wrapper"><article> <p id="status">HTML5 History API not supported</p> <p>最后一次触发的事件: <em><span id="lastevent">(none)</span></em></p> <p>点击下面的链接进行测试，点击后页面的URL发生变化，但重新刷新后依旧停留于此页面。</p> <p>可以使用浏览器原生的前进、后退按钮</p> <ul id="examples"> <li><a href="/history/first">first</a></li> <li><a href="/history/second">second</a></li> <li><a href="/history/third">third</a></li> <li><a href="/history/fourth">fourth</a></li> </ul> <div id="output"></div> </article> </section>

<script>

1:

2:

   3: var addEvent = (function () {

   4:   if (document.addEventListener) {

   5:     return function (el, type, fn) {

   6:       if (el && el.nodeName || el === window) {

   7:         el.addEventListener(type, fn, false);

   8:       } else if (el && el.length) {

   9:         for (var i = 0; i < el.length; i++) {

  10:           addEvent(el[i], type, fn);

  11:         }

  12:       }

  13:     };

  14:   } else {

  15:     return function (el, type, fn) {

  16:       if (el && el.nodeName || el === window) {

  17:         el.attachEvent('on' + type, function () { return fn.call(el, window.event); });

  18:       } else if (el && el.length) {

  19:         for (var i = 0; i < el.length; i++) {

  20:           addEvent(el[i], type, fn);

  21:         }

  22:       }

  23:     };

  24:   }

  25: })();

26:

27:

28:

29:

  30: var $ = function (s) { return document.getElementById(s); },

  31:     state = $('status'),

  32:     lastevent = $('lastevent'),

  33:     urlhistory = $('urlhistory'),

  34:     examples = $('examples'),

  35:     output = $('output'),

  36:     template = '<p>URL: <strong>{url}</strong>, name: <strong>{name}</strong>, location: <strong>{location}</strong></p>',

  37:     data = { // imagine these are ajax requests :)

  38:       first : {

  39:         name: "张三",

  40:         location: "北京"

  41:       },

  42:       second: {

  43:         name: "李四",

  44:         location: "上海"

  45:       },

  46:       third: {

  47:         name: "王五",

  48:         location: "重庆"

  49:       },

  50:       fourth: {

  51:         name: "小六",

  52:         location: "江苏，南京"

  53:       }

  54:     };

55:

  56: function reportEvent(event) {

  57:   lastevent.innerHTML = event.type;

  58: }

59:

  60: function reportData(data) {

  61:   output.innerHTML = template.replace(/(:?\{(.*?)\})/g, function (a,b,c) {

  62:     return data[c];

  63:   });

  64: }

65:

  66: //检测浏览器对此特性的支持情况

  67: !(function() {

  68:     if (typeof history.pushState === 'undefined') {

  69:       state.className = '当前浏览器不支持HTML5 History API';

  70:     } else {

  71:       state.className = 'success';

  72:       state.innerHTML = '当前浏览器支持HTML5 History API';

  73:     }

  74: })();

75:

  76: addEvent(examples, 'click', function (event) {

  77:   var title;

78:

  79:   event.preventDefault();

  80:   if (event.target.nodeName == 'A') {

  81:     title = event.target.innerHTML;

  82:     data[title].url = event.target.getAttribute('href'); // slightly hacky (the setting), using getAttribute to keep it short

  83:     history.pushState(data[title], title, event.target.href);

  84:     reportData(data[title]);

  85:   }

  86: });

87:

  88: addEvent(window, 'popstate', function (event) {

  89:   var data = event.state;

  90:   reportEvent(event);

  91:   reportData(event.state || { url: "unknown", name: "undefined", location: "undefined" });

  92: });

93:

  94: addEvent(window, 'hashchange', function (event) {

  95:   reportEvent(event);

  96: });

97:

  98: addEvent(window, 'pageshow', function (event) {

  99:   reportEvent(event);

 100: });

 101:

 102: addEvent(window, 'pagehide', function (event) {

 103:   reportEvent(event);

 104: });

 105:

</script>

</body>
</html>

因为需要web服务器的支持，所以上述效果无法在blog中进行预览。需有兴趣，可搭建一个简单的环境进行测试~

如果有兴趣浏览兼容ie6+（无定时器）的history，可以阅读人人网前端开发人员的这篇文章：http://jingwei.li/blog/?p=183

之前我也写过一篇相关的文章：”不使用定时器实现的onhashchange”，代码有参阅人人网前台脚本（一时好奇就右击源码大致扫了一下）

转载于:https://www.cnblogs.com/meteoric_cry/archive/2011/06/03/2070235.html

HTML5的Histroy API相关推荐

classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类
classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...
HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
HTML5 Audio/标签Api整理（二）
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
html标签api,html5新增标签+API介绍
新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...
html5中api有什么,HTML5中的API概览
HTML5中的API概览整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
html5 safari浏览器全屏显示隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作，也...
我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...
HTML5+百度地图API实现地理定位
背景如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客原文地址一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...

HTML5的Histroy API

HTML5的Histroy API相关推荐

最新文章

热门文章