ajax后退解决方案（四）

目录

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>0</title>
</head>
<body>
    <input type="button" value="加1" onclick="add()" />
    <div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div>
</body>
</html>
<script src="history-0.4.js"></script>
<script>
    var info = document.getElementById('info');
    var i = 1;
    function add() {
        var data = {
            param : i,
            func : func
        };
        History.push(data);
        i++;
    }
     
    History.push({param:0, func: func});
     
    function func(i) {
        info.innerHTML = i;
        document.title = i;
    }
</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

posted on   snandy  阅读(8809)  评论(5)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
< 2011年9月 >
日 一 二 三 四 五 六
28 29 30 31 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示
SQL AI 助手