HTML5的Histroy API

简介: History API在各浏览器下的支持情况: 不支持 4.0+ 5.0+ 8.0+ 不支持比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很平滑(外层框架的内容没有重新加载,例如:登录信息、是否关注主人等),然后是ajax载入新内容。

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


Internet Explorer

不支持

Firefox

4.0+

Safari

5.0+

Google Chrome

8.0+

Opera

不支持

比较典型的是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/

image

image 

这样即使我刷新页面,所有以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”,代码有参阅人人网前台脚本(一时好奇就右击源码大致扫了一下)

目录
相关文章
|
5月前
|
存储 JavaScript 前端开发
HTML API
HTML API
44 3
|
2月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
40 1
|
2月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
29 1
|
2月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
33 1
|
5月前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
55 4
|
5月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
83 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
5月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
69 0
|
5月前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
31 1
|
2月前
|
机器人 API Python
智能对话机器人(通义版)会话接口API使用Quick Start
本文主要演示了如何使用python脚本快速调用智能对话机器人API接口,在参数获取的部分给出了具体的获取位置截图,这部分容易出错,第一次使用务必仔细参考接入参数获取的位置。
119 1
|
11天前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
44 6
下一篇
无影云桌面