ajax后退解决方案（五）

最新推荐文章于 2021-08-05 12:38:02 发布

weixin_30746117

最新推荐文章于 2021-08-05 12:38:02 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/springMVC/archive/2011/09/30/2204308.html

版权

五、使用history.pushState产生历史，popstate事件处理后退

 
      01<!DOCTYPE html> 
 
      02<html> 
 
      03<head> 
 
      04    <meta charset="utf-8" /> 
 
      05    <title>0</title> 
 
      06</head> 
 
      07<body> 
 
      08    <input type="button" value="加1" onclick="add()" /> 
 
      09    <div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div> 
 
      10</body> 
 
      11</html> 
 
      12<script src="history-0.5.js"></script> 
 
      13<script> 
 
      14    var info = document.getElementById('info'); 
 
      15    var i = 1; 
 
      16    function add() { 
 
      17        var data = { 
 
      18            param : i, 
 
      19            func : func 
 
      20        }; 
 
      21        info.innerHTML = i; 
 
      22        document.title = i; 
 
      23        History.push(data); 
 
      24        i++; 
 
      25    } 
 
      26      
 
      27    function func(i) { 
 
      28        info.innerHTML = i; 
 
      29        document.title = i; 
 
      30    } 
 
      31</script>

pushState和popstate是HTML5为history对象新增的方法和事件。虽然可以改变地址栏，但却不能复制地址栏的url直接进入该历史记录。该系列API知道IE10预览版尚不支持，Firefox/Safari/Chrome/Opera的最新版本均支持。

开发中应根据需求组合以上形式以兼容所有浏览器，如新浪微博就组合使用了方案一，四，五(base.js)。如果项目中使用了一些开源库如jQuery，mootools等时强烈推荐使用histroy.js 。古老的dhtmlHistory.js和RSH已经很久没更新了。

history-0.5.js

相关：

http://www.w3.org/TR/html5/history.html

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

分类: ajax/sjax

转载于:https://www.cnblogs.com/springMVC/archive/2011/09/30/2204308.html

weixin_30746117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax后退解决方案（五）

五、使用history.pushState产生历史，popstate事件处理后退view sourceprint?01<!DOCTYPE html> 02<html> 03<head> 04<meta charset="utf-8" /> 05<title>0</title> 06</head> ...
复制链接

扫一扫