使用jquery的load方法设计动态加载，并解决浏览器前进后退刷新等问题

Posted 2020-09-15 七星6609

继上一篇 使用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();
    })