首页 > 代码库 > 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题
使用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="http://www.mamicode.com/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(); })
使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。