标签：style blog http color io os ar strong sp
离开查询列表页后, 想在回到列表页,除了按 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 = 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 = "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 方法.
标签：style blog http color io os ar strong sp
原文地址：http://www.cnblogs.com/xling/p/4052353.html
