首页 > 代码库 > 穿越到历史列表页面

穿越到历史列表页面

离开查询列表页后, 想在回到列表页,除了按 Backspace 之外, 还真不是一件容易的事情.

产品部每次都说用弹出框, 就不会有这个问题.
可是一堆表单拥挤在一个狭小的空间里, 真的很憋屈。

有两个解决方案:
A, history.go(-xxx)
B, 重新加载列表页, 回填查询条件,然后执行查询.


B方案,回填查询表单, 用js 提交表单, 这个方案可行, 我做了实现, 但是会有两次页面刷新(一次加载查询页面,一次执行查询), 感觉怪怪的, 还不如用 history.go(-xxx) .

history.go 大家都常用, 可是这里它并不管用, 因为:不确定列表页到底是 -1 , -2 还是 -X.

history.length 不知道大家了解不了解, 它是指 当前页签 的 整个 浏览历史 的长度, 而不是指 当前页面 在 整个历史队列 中位置.
每次有新页面被访问,这个 length 的值都会加1, 即使退回, 这个 length 也是新的长度.

 

但是浏览器有个特性:
按回退键,回退到某个历史页面, 会把 离开这个页之前 填到页面上的数据 原样还原,


比如有一个文本框, 离开之前,手动输入了一个值, 回退到这个页面后, 这个文本框的内容还是你手动输入的那个值.

 

如果利用这个特性, 上面说的问题就很好解决了:
A, 在查询页面加载的时候, 用 js 给一个 hidden input 赋值当前的 history.length
B, 页面离开时, 把这个值写到 cookie 里.
C, 在需要返回到列表页的页面里,取得这个 cookie 的值, 与当前的 history.length 计算出 history.go(-x) 的 x.

 

 1 var IndexPageHelper = {}; 2 (function (i) { 3     i.SetHistory = function () { 4         //页面加载完成时才做下面这些动作 5         $(function () { 6             //不要试图动态创建这个 hidden input , 动态创建的, 回退时,无法还原 7             //如果动态创建, 回退的时候, 是得不到这个hidden input 的, 每次都会 appendTo 8             //if ($("#historyIndex").length == 0) 9             //    $("<input type=‘hidden‘ id=‘historyIndex‘ />").appendTo(document.body);10 11             if ($("#historyIndex").val() == "") {12                 //新页面会执行这里13                 var str = history.length + "|" + location.pathname;14                 $("#historyIndex").val(str);15                 CookieHelper.set("historyIndex", str, null, "/");16             } else {17                 //回退页面会执行这里18                 //CookieHelper.set("historyIndex", $("#historyIndex").val(), null, "/");19             }20         });21     }22 23 24     i.GoToIndex = function (defaultHref) {25         var tmp = CookieHelper.get("historyIndex").split("|");26         var idx = tmp[0];27         var path = tmp[1];28         var backCount = Math.abs(history.length - idx);29         if (backCount > 0 && path.indexOf(defaultHref) >= 0)30             history.go(-backCount);31         else {32             location.href =http://www.mamicode.com/ defaultHref;33         }34     };35 36 })(IndexPageHelper);

 

 

上面这段代码, 需要注意的地方:

A, hidden input 一定不能是用 js 动态创建的. 动态创建的, 回退的时候, 无法还原

为了证明动态创建的 input 无法还原,我写个简单的例子:

 1 <html> 2 <head> 3     <title></title> 4 </head> 5 <body> 6     <a href="http://www.baidu.com">点击,记得按回退键</a> 7     <input type="text" value="a" /> 8     <script src="http://localhost:16269/Scripts/jquery-1.10.2.js"></script> 9     <script>10         //var ipt = document.createElement("input");11         //ipt.type = "text";12         //ipt.value = "http://www.mamicode.com/b";13         //document.body.appendChild(ipt);14 15         //$(function () {16         //    if ($("#b").length == 0)17         //        $("<input type=‘text‘ id=‘b‘>").appendTo(document.body);18         //});19 20         setTimeout(function () {21             if ($("#b").length == 0)22                 $("<input type=‘text‘ id=‘b‘>").appendTo(document.body);23         }, 2000, null);24     </script>25 </body>26 </html>

 

B, SetHistory 里的代码,一定要等到页面加载完成才能执行, 页面加完成完时 , 所以我用 $(function(){...}) 包了一层.

如果不等待页面加载完成, 就去读 historyIndex 的值, 是取不到的, 因为浏览器还没有把数据还原 (至少我在 IE11 里调试的情况是这样的).

 

现在需要做的是

在列表页面上调用 IndexPageHelper.SetHistory 方法,

在子页面上的 返回列表 按钮的点击事件上,调用 IndexPageHelper.GoToIndex 方法.

穿越到历史列表页面