继上一篇 使用 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
- varurlStr = $(url).attr("href");
- varurlStr = urlStr.split("..")[1];// 菜单ID
- varmenuId = $(url).attr("id");
- $.pushState(urlStr, menuId, data);
- // 加载对应URL页面$.loadPage($(url).attr("href"), data);
- }
- /*
- 浏览器前进后退触发事件
- */
- $.popState();
- /*
- * 浏览器刷新事件
- */
- $(function(){
- $.refresh();
- })
来源: http://www.cnblogs.com/qixing/p/6785677.html