jqueryのloadメソッドを使用して動的ロードを設計し、ブラウザの前進、後退、リフレッシュなどの問題を解決します.

前回jqueryのloadメソッドを使用して動的ロードを設計し、ロードされたページJavaScriptの失効問題を解決してバックグラウンドビジネスシステムの一部の動的ロード問題を解決したが、このフレームワークは通常のユーザー体験からまだいくつかの問題がある.例えば、ブラウザの前進、後退、リフレッシュなどの問題がある.あるブロガーも同様の問題に直面し、次にブラウザの前進、後退、リフレッシュに対してユーザー体験の最適化を行う.
上記の問題を解決する際にも様々なsearchが行われていますが、ほとんどが自分で実現したプラグインであり、プラグインが長年修理されておらず、新しいjqueryのサポートが不十分です.HTML 5の広範な使用のため、ほとんどの主流のブラウザはすでにh 5をサポートしています.もしあなたがIE 6/7/8をつかんで手を放さない忠実なファンであれば、省略してください.本文はh 5のhistory方法を使って実現します.
また、前編に加えて、jqueryを使ったプラグインの書き方が少しパッケージ化されており、loadの原理は前編で紹介されていますが、ここではこれ以上説明しません.ここではh 5の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 ，
    *     ：  
    *  ：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();
    })

 
転載先:https://www.cnblogs.com/qixing/p/6785677.html