首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

HTML5 对history新增的API:pushState,replaceState,state,popstate

2014年04月22日 发布 阅读(786) 作者:懒炖

相信大家对window的history对象都很熟悉,html4对history对象定义下面几种方法:

length:返回浏览器历史列表的URL数量

back():加载历史列表中的前一个URL,相当于浏览器上”后退”按钮

foword():加载历史列表中的下一个URL,相当于浏览器上的”前进”按钮

go():加载历史列表中指定的页面。如history.go(0)->刷新页面,history.go(-1)后退,history.go(1)前进

基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

HTML5对history进行了哪些扩展呢?

1、history.pushState(state object,title,url)
HTML5允许你使用该方法对浏览器历史列表进行添加

pushState方法包含三个参数,state object->状态对象,title->标题(firefox目前会忽略此参数),url->地址(可选)

state object: 它是由pushState方法创新新的历史条目相关的javascript对象。firefox把该对象存储在用户的磁盘上(以便重启浏览器时该对象也会生效),对其规定了一个640K的大小,如果超过将会报错。

title:新的历史条目的标题,firefox目前会忽略该参数

url:新的历史条目指向的url,该参数可选 ,如果没有传递url,url默认指向当前页面。

需要注意的是:调用pushState方法后,浏览不会去加载此url,但可能会在稍候尝试加载此url,如用户重启浏览器时。新url不一定是绝对地址,也可以是相对地址,如果是相对地址,新url就是相对当前页面的。

调用history.pushState跟window.location= “url”类似,但pushState有几点优势:

A、新URL可以为同源下的任意地址

B、可以不改变当前页面的URL

C、可以为新的历史条目随意关联一些数据(object)

2、history.replaceState()

HTML5允许你使用该方法对浏览器历史列表进行修改,参数与pushState差不多。区别在于:pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。

3、history.state

用于保存上面两种方法的数据,不同浏览器对其的读写权限不一样

4、window.onpopstate
事件,使用pushState和replaceState时都会触发该事件。这里需要说明一下的是,现在jQuery比较流行,使用jQuery绑定”popstate”事件时,使用event.state并不能取到history.state的值,而必须使用event.originalEvent.state。

  1. $(window).on("popstate", function (e) {
  2. //e.state =>undefined
  3. var state = history.state || e.originalEvent.state;
  4. if(state){
  5. //dosomething
  6. }
  7. });
  8. window.addEventListener("popstate",function(e){
  9. //e.state => 可以取到数据
  10. });

对于history新增api的安全性,网络其他参考资料展示它是安全的,本站暂未做测试。

浏览器对history新增API的支持情况:

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari IPHONE Android
replaceState
pushState 5+ 4.0 (2.0)+ 10+ 11.50+ 5.0+ 4.2.1+ —
history.state 18+ 4.0 (2.0)+ 10+ 11.50+ 6.0+ 4.2.1+ —

如果检测浏览器是否支持History新增的api:

  1. function supports_history_api() {
  2. return !!(window.history && history.pushState);
  3. }

ps:对html5特性的检测我们还可以用:modernizr,使用参数文档:http://diveintohtml5.info/detect.html

写了一个简单的基于jQuery的$.history插件

  1. /*
  2. * 基于ajax项目的应用程序,修复前进后退按钮
  3. * 插件写的较简单,只是提供一种基本思路,有错的地方请多指教
  4. * 调用:
  5. * 初始化页面时调用$.history.int方法
  6. * 在需要产生历史记录的操作中调用$.history.create方法,一般为ajax项目的链接中
  7. */
  8. (function ($) {
  9. $.history = {
  10. //$.history.set()->创建历史记录
  11. create: function (data) {
  12. if (!data) { return; }
  13. //这里data假设为json对象或json字符串,最终数据转换为JSON字符串进行保存
  14. data = typeof data === "string" ? data : JSON.stringify(data);
  15. //如果当前数据与上一次数据相同,则return
  16. if($.trim(data)==this.data) { return; }
  17. if (this.support) {
  18. //利用pushState创建历史记录,data保存在history.state中
  19. history.pushState(data, null, null);
  20. } else {
  21. //不支持pushState的,主要为IE6、7浏览器,使用document.write()创建历史记录
  22. //iframe中存在一个ID为state的div,用来存储data数据
  23. //document.write在iframe中写入内容时,也会触发iframe的onload事件
  24. //这里用this.state来区别,this.state==1时表示写入状态
  25. this.state = 1;
  26. var doc = this.iframe.contentWindow.document;
  27. doc.open();
  28. doc.write('<html><body><div id="state">' + data + '</div></body></html>');
  29. doc.close();
  30. }
  31. this.data = $.trim(data);
  32. },
  33. //$.history.int()->初始化页面
  34. init: function (data,callback) {
  35. var self = this;
  36. //绑定触发浏览器后退前进按钮事件
  37. if (this.support) {
  38. //支持pushState的浏览器,前进后退时会触发popstate事件
  39. $(window).off("popstate").on("popstate", function (event) {
  40. //这里需要注意的是:如果用jQuery方式绑定,e.state是取不到数据的,必须用event.originalEvent.state
  41. //使用原生的attachEvent或addEventListener方法可以直接用e.state
  42. //safari5.0支持pushState,但不支持history.state
  43. var state = history.state || event.originalEvent.state
  44. if(state){
  45. //dosomething
  46. //此处可依据history.state数据在用户操作“前进”“后退”按钮时进行不同的操作
  47. //如利用ajax加载页面
  48. if(typeof callback==="function"){
  49. callback(JSON.parse(data));
  50. }
  51. }
  52. });
  53. } else {
  54. //为IE67创建一个iframe,用来产生历史记录
  55. this.iframe = document.createElement("iframe");
  56. this.iframe.src = "about:blank";
  57. this.iframe.style.display = "none";
  58. $("body").append(this.iframe);
  59. //为新建的iframe添加onload事件,
  60. $(this.iframe).off("load").on("load", function () {
  61. var state = $(this).contents().find("#state");
  62. //document.write写入iframe完成时,this.state设为0;
  63. if (state[0] && self.state == 0) {
  64. //dosomething
  65. //此处可依据history.state数据在用户操作“前进”“后退”按钮时进行不同的操作
  66. //如利用ajax加载页面
  67. if(typeof callback==="function"){
  68. callback(JSON.parse(data));
  69. }
  70. }
  71. self.state = 0;
  72. });
  73. };
  74. if(typeof data === "string"){
  75. //初始化时创建一次历史记录(看是否需要而定)
  76. this.create(JSON.parse(data))
  77. }
  78. },
  79. //保存当次json字符串
  80. data: "",
  81. //为不支持pushState创建的iframe
  82. iframe: null,
  83. //判断是否支持pushState
  84. support: !!(window.history && history.pushState)
  85. };
  86. })(jQuery);

参考文档:

官方:http://www.w3.org/TR/html5/browsers.html#the-history-interface

Opera:http://dev.opera.com/articles/view/introducing-the-html5-history-api/

Mozilla:http://dev.opera.com/articles/view/introducing-the-html5-history-api/

diveintohtml5:http://diveintohtml5.info/detect.html

window:https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate

http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • canvas封装工具类

    收集的一些Canvas工具类,有库,有框架,有api,会持续更新

    发布:2019-03-04 阅读(465)

  • html之”aria-*“标签

    ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’,是WAI-ARIA的一部分(它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南)。 WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

    发布:2019-01-30 阅读(538)

  • window.onhashchange事件

    hashchange事件会在浏览器地址的hash值改变时被触发。这是html5新增的一个事件,IE6/IE7及IE8兼容模式不支持onhashchange,但IE8标准模式支持onhashchange。这对于基于ajax开发的web应用程序是非常有用的一个事件,因为ajax请求不能触发浏览器添加新的历史条目,使得“前进”“后退”按钮在ajax开发的应用程序中不能使用。

    发布:2014-04-22 阅读(596)

  • HTML5 对history新增的API:pushState,replaceState,state,popstate

    基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

    发布:2014-04-22 阅读(786)

  • 语义化HTML-语义化你的HTML标签或属性

    HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义

    发布:2012-10-21 阅读(670)