標籤：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 方法.
穿越到曆史列表頁面
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
