使用jquery的load方法設計動態加載，並解決瀏覽器前進、後退、刷新等問題

繼上一篇 使用jquery的load方法設計動態加載，並解決被加載頁面JavaScript失效問題 解決了後臺業務系統的部分動態加載問題，然而該框架離正常的用戶體驗還存在一些問題，如：瀏覽器的前進、後退、刷新等問題。有博友也遇到了一樣的問題，接下來就針對瀏覽器的前進、後退、刷新進行用戶體驗優化。

在解決上述問題時也進行了各類search,可是大部分都是本身實現的插件，並且插件年久失修，對於新的jquery支持不佳。也有使用h5新加的history方法來實現的，因爲HTML5的普遍使用，絕大部分主流瀏覽器已經支持h5，如果你仍是抓着IE6/7/8不放手的忠實粉絲，請略過，本文就是使用h5的history方法來實現的。

並且在上一篇的基礎上，使用jquery的插件的寫法略微封裝了一下，load的原理已經在上一篇介紹，這裏再也不復贅，這裏對h5的history API介紹一下：

history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時做爲參數傳遞過去；title爲頁面標題，當前全部瀏覽器都會忽略此參數；url爲頁面地址，可選，缺省爲當前頁地址。

簡單封裝的插件：

 1 $.extend({
 2     /**
 3      *  使用jquery的load方法加載頁面, 
 4      *  根據url地址加載該頁面中的id爲content的內容 到 本頁面的ID爲content的位置
 5      *  url        連接URL
 6      *  data    連接請求參數
 7      */
 8     loadPage: function(url, data) {
 9         $.ajaxSetup({cache: false });
10         $("#content").load(url+ " #content ", data, function(result){
11             // 將被加載頁的JavaScript加載到本頁執行
12             $result = $(result); 
13             // 將頁面傳遞參數data定義爲param 在被加載頁接收
14             $result.find("script").prepend("var param = "+JSON.stringify(data)).appendTo('#content');
15         });
16     },
17     /**
18      * 保存連接url、菜單ID、連接請求數據到 歷史記錄中
19      * url        連接URL
20      * menuId    菜單ID
21      * data        連接請求參數
22      */
23     pushState : function(url, menuId, data) {
24         console.log("pushState:"+url+":::"+ menuId+":::"+ data)
25         
26         // 若是URL沒有menuId，即認爲該菜單頁面中連接跳轉，使用該連接所在頁的menuId
27         if(menuId == null || menuId == ''){
28             menuId = history.state.menuId;
29         }
30         // 將URL，menuId, 請求參數保存到歷史記錄中
31         history.pushState({urlStr : url, menuId : menuId, data : data}, "頁面標題", "?_url="+url);
32     },
33     /**
34      * 瀏覽器 前進、後退事件
35      */
36     popState : function(){
37         window.addEventListener("popstate", function() {
38             var currentState = history.state;
39             if(currentState!=null){
40                 url = ".."+currentState.urlStr;
41                 this.menuOpen(currentState.menuId);
42                 var primitiveUrl = currentState.urlStr.split("#")[0];
43                 //aa = primitiveUrl;
44                 $.loadPage(url, currentState.data);
45             }
46         });
47     },
48     /**
49      * 瀏覽器刷新事件
50      */ 
51     refresh : function(){
52         var currentState = history.state;
53         if(currentState!=null){
54             loadUrl = ".."+currentState.urlStr;
55             var primitiveUrl = currentState.urlStr.split("#")[0];
56             aa = primitiveUrl;
57             var page = loadUrl.split("#")[1];
58             pageScript = "";
59             if(page !=null){
60                 pageScript = " $table.page("+page+").draw(false);";
61             }
62             //console.log(loadUrl+":::"+ currentState.data);
63             $.loadPage(loadUrl, currentState.data);
64         }
65     },
66     /**
67      * 菜單樹展開方法
68      * menuId      菜單對應的ID
69      */
70     menuOpen : function(menuId){
71         $("#leftMenu").find(".active").removeClass("active");
72         $("#leftMenu").find("ul").css({"display":"none"});
73         
74         $("#"+menuId).addClass("active");
75         $("#"+menuId).parents("li").addClass("active");
76         $("#"+menuId).parents("ul").addClass("menu-open").css({"display":"block"});
77     }
78 });

對插件的使用：

/*
    *加載變換內容，主要url參數爲dom對象，而且該dom中的url放在href中，
    *調用方式如：<span onclick="javascript:load(this);" href="/backstage/website/test.html">測試</span>
    *注意：1.該dom對象最好不要用a標籤，由於點擊a標籤會進入href指定的頁面
    *      2.要加載的內容要用 id="content" 標註，由於load中指明瞭加載頁面中指定的id爲content下的內容
    *    3.對應頁面的JavaScript寫在content下
    */
    function load(url, data){
        // url
        var urlStr =  $(url).attr("href");
        var urlStr = urlStr.split("..")[1];// 菜單ID
        var menuId = $(url).attr("id");
        $.pushState(urlStr, menuId, data);
        // 加載對應URL頁面
        $.loadPage($(url).attr("href"), data);
    }
 
    /*
        瀏覽器前進後退觸發事件
    */
    $.popState();
     
    /*
    * 瀏覽器刷新事件
    */
    $(function(){
        $.refresh();
    })