ajax后退解决方案(五)
来源:互联网 发布:java 工程根目录 编辑:程序博客网 时间:2024/06/05 18:47
五、使用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
- ajax后退解决方案(五)
- ajax后退解决方案(一)
- ajax后退解决方案(二)
- ajax后退解决方案(三)
- ajax后退解决方案(四)
- Ajax浏览器后退处理
- AJAX页面浏览器前进后退按钮失效和地址书签的解决方案
- AJAX不再是“搜索引擎杀手”(后退的实现)
- struts--防止浏览器后退(解决方案)
- AJAX的产进后退
- AJAX的产进后退
- AJAX 前进后退刷新问题
- 封杀IE,Ajax后退功能
- AJAX设计策略(五)
- ajax入门指南(五)
- PHP 进阶(五)AJAX
- 【springmvc (五)】使用ajax
- ionic后退造成的闪退解决方案
- android解析jasonarray遇到的问题
- ajax后退解决方案(四)
- 说说 Windows 中的中文字体
- 库的路径和环境变量文件说明
- 软件工程
- ajax后退解决方案(五)
- VB.NET中的类之间的调用
- Tokyo Cabinet及Tokyo Tyrant tcb tch比较分析
- Java基础19天--02--IO流
- HTLM5 颜色渐变效果
- 实现类似 iOS 5 推送通知效果的代码例子
- web项目安全策略
- 关于java applet引用第三方jar文件 applet权限的提升 通过网络访问
- 如何实现像ios那样的富有弹性的ListView (上下滑动有弹性,且能恢复原状)