需求場景：在我們做web 前段開發的時候，可能會遇到這樣的場景。在一個列表（list）頁面，如下圖：
當我們前進到第10頁時候，選中一條數據，點擊編輯，會跳轉到如下的詳細（detail）頁面，如圖：
提出問題：我們是如何跳轉到這個詳細頁面的呢？
1.最直接的方法，window.location=details.aspx.
現在問題來了，如果是直接重定向到詳細頁面，那么在返回列表的時候，會不會遇到什么問題。
在返回的時候，假設返回執行的代碼：window.location=list.aspx。這樣就會返回到列表，沒錯，可是回到了列表的第一頁啊。
上面假設的這種跳轉，會出現“狀態”丟失的情況。
或許有同學說了，直接將參數傳遞到詳細頁面不就ok了，然后在返回的時候把參數在回傳到列表頁面。這樣從理論上可以解決此問題，假如，列表還帶有很多查詢條件呢，還有分頁參數呢？傳遞參數是不是最佳做法呢？
”傳遞參數方案“，有以下缺點：
1.要把列表（list）也的 查詢條件，分頁數據，等傳遞到詳細頁面（detail）。傳遞過程比較復雜。
2.當返回列表頁面時候，會將這些參數回傳，那么列表頁面會“刷新”。用戶體驗不夠良好，刷新意味着重新獲取數據。
3.當列表頁面上，有很多狀態信息時候，返回時候如何保證呢（比如：選中了一行，當返回時候還要把哪行數據選中）？
。。。。。
針對這樣的場景有沒有更好更簡單的解決方案呢？或許有同學已經想出來了，我在演示這個效果給我們經理看的時候，他一下就猜出來如何實現的了
思路：“在list頁面放置兩個div，一個div存放當前列表頁面的內容，另一個div存放詳細頁面，當前往詳細頁面時候，把第一個div隱藏，第二個div顯示，當返回時候，第二個div隱藏，第一個div顯示。”-------------------這個想法，不是在洗澡的時候出現的，而是在睡覺前靈光一現，如有雷同，純是巧合，哈哈
這樣就完完全全保存了列表頁面的狀態，當點擊詳細頁面時候，直接顯示第二個div，這個div中可以是ajax的數據，也可以是iframe頁面。返回時，直接顯示第一個div，這樣就“完完全全”回到了前往詳細頁面之前的那個列表頁面了。
我們可以把創建這兩個div的代碼及切換效果封裝一下。根據思路，我們需要做的事情。
1.動態創建這個兩個div。
2.當切換到詳細頁面時候，需要 一個函數，實現切換。
3.當點擊返回時候，需要一個函數實現，返回切換。
實現代碼：
第二個div里面實現為iframe頁面，該代碼使用jQuery，有一個Form的命名空間。
1 //depends:jquery.js
2 ; (function($) {
3 $.extend($, {
4 UI: {
5 Dialog: {},
6 Form: {}
7 }
8 });
9 })(jQuery);
View Code
1 ; (function($) {
2 //start
3 var settings = {
4 MianDivID: "_mainFormContainer",
5 PopDivID: "_popFormContainer",
6 PopIframeID: "_popFormIframe",
7 CloseFormBtnID: "_sysCloseFormBtn"
8 };
9 var _initCallBack = function() { };
10 var _showPopFormCallBack = function() { };
11 var _showMianFormCallBack = function() { };
12
13 var InitPageContainer = function() {
14
15 _initCallBack = arguments[0] || function() { };
16 _showMianFormCallBack = arguments[1] || function() { };
17 _showPopFormCallBack = arguments[2] || function() { };
18
19 if ($.browser.msie && $.browser.version == "6.0") {//如果是ie6
20 setTimeout(function() {
21 var form = $("form").eq(0);
22
23 form.wrapInner("<div id=\"" + settings.MianDivID + "\"></div>");
24
25 var popFormHtml = "<div id=\"" + settings.PopDivID + "\" style=\" display:none;\">";
26 popFormHtml += "<iframe id=\"" + settings.PopIframeID + "\" width=\"100%\" height=\"100%\" frameborder=\"0\" src=''></iframe></div>";
27 popFormHtml += "<input type=\"button\" id=\"" + settings.CloseFormBtnID + "\" style=\" display:none;\" />";
28
29 form.append(popFormHtml);
30 $("#" + settings.CloseFormBtnID).click(function() {
31 ShowMainForm();
32 });
33 _initCallBack(); //回調初始化
34 }, 0);
35
36 }
37 else {
38 var form = $("form").eq(0);
39
40 form.wrapInner("<div id=\"" + settings.MianDivID + "\"></div>");
41
42 var popFormHtml = "<div id=\"" + settings.PopDivID + "\" style=\" display:none;\">";
43 popFormHtml += "<iframe id=\"" + settings.PopIframeID + "\" width=\"100%\" height=\"100%\" frameborder=\"0\" src=''></iframe></div>";
44 popFormHtml += "<input type=\"button\" id=\"" + settings.CloseFormBtnID + "\" style=\" display:none;\" />";
45
46 form.append(popFormHtml);
47 $("#" + settings.CloseFormBtnID).click(function() {
48 ShowMainForm();
49 });
50 _initCallBack(); //回調初始化
51 }
52 }
53 var ShowMainForm = function() {
54 $("#" + settings.MianDivID).show();
55 $("#" + settings.PopDivID).hide();
56 $("#" + settings.PopIframeID).attr({ "src": "#" });
57 _showMianFormCallBack();
58 }
59 var ShowPopForm = function(navigateUrl) {
60 $("#" + settings.MianDivID).hide();
61 $("#" + settings.PopDivID).show();
62 $("#" + settings.PopIframeID).attr({ "src": navigateUrl });
63 _showPopFormCallBack();
64 }
65 var ClosePopForm = function(isCallback) {//關閉具體功能頁面
66 var isRefresh = true; //是否回調父頁面函數
67 if (isCallback != null) { isRefresh = isCallback; }
68
69 var btn = parent.document.getElementById(settings.CloseFormBtnID);
70 if (btn != null) {
71 btn.click();
72 }
73 else {
74 try {
75 btn = window.opener.document.getElementById(settings.CloseFormBtnID);
76 if (btn != null) {
77 if (isRefresh) {
78 btn.click(); //點擊
79 }
80
81 }
82 } catch (e) { }
83 window.opener = null; window.open("about:blank", "_self"); window.close(); //關閉頁面
84 }
85 }
86
87 /* -----[ Exports ]----- */
88
89 $.UI.Form.Settings = settings;
90 $.UI.Form.Init = InitPageContainer;
91 $.UI.Form.Open = ShowPopForm;
92 $.UI.Form.Close = ClosePopForm;
93
94 //end
95 })(jQuery);
使用方法：
1、 在list頁面，dom加載完畢后，執行注冊。
1 //初始化【主操作頁面】切換到【具體操作頁面】環境
2 $.UI.Form.Init(function() {//初始化回調
3
4 }, function() {//當回到主操作頁面時，要執行的回調
5 $("#grid1").trigger("reloadGrid");
6 });
2、切換到詳細頁面代碼：
$.UI.Form.Open('detail.aspx?id=101&name=a')
3、返回代碼：
$.UI.Form.Close(bool);
以上實現已經用在項目中，但還沒來得及在認真整理封裝下，供大家參考
上面的代碼並沒有滿足所有情況的需要，請同學們根據需要自行完善。需要完善的地方如下：
1.第二個div是ajax得到的數據。
2.當在返回時候，調用Close函數時，傳入bool類型或者參數，實現控制返回的回調函數，執行，控制是否需要刷新列表等其他操作。
3.。。。。。。
兩個div的顯示隱藏，可以解決上面“參數傳遞方法”的具有的缺陷問題，並且第二個div的里面如果是iframe的話，嵌套的頁面還可以繼續使用該切換，這樣返回回去時候，狀態是沒有任何丟失的，如果有同學有更好的解決辦法，歡迎提出交流。
總結：
我稱這個跳轉叫做“切換”，類似apple的應用程序，從一個界面，切換到第二個界面，並且有滑動效果（可以自己實現），可以一級一級的返回，思路就是兩個div的顯示隱藏。
第一次寫blog，可能表達方式，描述，排版，等有些欠缺，還請各位同學包涵，我們重在交流思路，哈哈。希望閱讀此文后，能對你有所幫助！
有什么疑問請提出來，我們共同討論，共同進步，謝謝大家！