ajax后退解决方案(四)

 

三、通过修改location.hash产生历史,hashchange事件处理后退

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.4.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        History.push(data);
22        i++;
23    }
24      
25    History.push({param:0, func: func});
26      
27    function func(i) {
28        info.innerHTML = i;
29        document.title = i;
30    }
31</script>

每次ajax操作去改变location.hash的值,每次修改后地址栏均会有所体现。在window.onhashchange中监听该事件。通过hash的值取对应的历史。

较iframe的好处是可以复制地址栏的url直接进入该历史记录,缺点是IE6/7不支持。

history-0.4.js

相关:

http://msdn.microsoft.com/en-us/library/cc288209(v=vs.85).aspx

https://developer.mozilla.org/en/DOM/window.onhashchange

http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange

分类: ajax/sjax
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值