继上一篇 使用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为页面地址,可选,缺省为当前页地址。

简单封装的插件:

 $.extend({
/**
* 使用jquery的load方法加载页面,
* 根据url地址加载该页面中的id为content的内容 到 本页面的ID为content的位置
* url 链接URL
* data 链接请求参数
*/
loadPage: function(url, data) {
$.ajaxSetup({cache: false });
$("#content").load(url+ " #content ", data, function(result){
// 将被加载页的JavaScript加载到本页执行
$result = $(result);
// 将页面传递参数data定义为param 在被加载页接收
$result.find("script").prepend("var param = "+JSON.stringify(data)).appendTo('#content');
});
},
/**
* 保存链接url、菜单ID、链接请求数据到 历史记录中
* url 链接URL
* menuId 菜单ID
* data 链接请求参数
*/
pushState : function(url, menuId, data) {
console.log("pushState:"+url+":::"+ menuId+":::"+ data) // 如果URL没有menuId,即认为该菜单页面中链接跳转,使用该链接所在页的menuId
if(menuId == null || menuId == ''){
menuId = history.state.menuId;
}
// 将URL,menuId, 请求参数保存到历史记录中
history.pushState({urlStr : url, menuId : menuId, data : data}, "页面标题", "?_url="+url);
},
/**
* 浏览器 前进、后退事件
*/
popState : function(){
window.addEventListener("popstate", function() {
var currentState = history.state;
if(currentState!=null){
url = ".."+currentState.urlStr;
this.menuOpen(currentState.menuId);
var primitiveUrl = currentState.urlStr.split("#")[0];
//aa = primitiveUrl;
$.loadPage(url, currentState.data);
}
});
},
/**
* 浏览器刷新事件
*/
refresh : function(){
var currentState = history.state;
if(currentState!=null){
loadUrl = ".."+currentState.urlStr;
var primitiveUrl = currentState.urlStr.split("#")[0];
aa = primitiveUrl;
var page = loadUrl.split("#")[1];
pageScript = "";
if(page !=null){
pageScript = " $table.page("+page+").draw(false);";
}
//console.log(loadUrl+":::"+ currentState.data);
$.loadPage(loadUrl, currentState.data);
}
},
/**
* 菜单树展开方法
* menuId 菜单对应的ID
*/
menuOpen : function(menuId){
$("#leftMenu").find(".active").removeClass("active");
$("#leftMenu").find("ul").css({"display":"none"}); $("#"+menuId).addClass("active");
$("#"+menuId).parents("li").addClass("active");
$("#"+menuId).parents("ul").addClass("menu-open").css({"display":"block"});
}
});

对插件的使用:

/*
*加载变换内容,主要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();
})

使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题的更多相关文章

  1. 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  2. vue问题八:动态加载loading、浏览器图标

    全局动态加载loading: 参考文档:https://blog.csdn.net/qq_34825875/article/details/79570301 在main.js或者index.js引用  ...

  3. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  4. jquery动态加载并解决被加载页面js失效问题

    代码布局结构分为 header  left  content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...

  5. Eclipse 插件安装方法和插件加载失败解决办法

    一:是利用Eclipse Software  Update 添加网址,让Eclipse 自动的搜索下载最新的插件. 比如安装VE这个可视化编辑UI的插件,其步骤为 Help > Software ...

  6. jQuery AJAX load() 方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...

  7. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  8. jQuery – AJAX load() 方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...

  9. unity3d Resources.Load动态加载资源

    初步整理并且学习unity3d资源加载方法,预计用时两天完成入门学习Unity3d常用两种加载资源方案:Resources.Load和AssetBundle Resources.Load就是从一个缺省 ...

随机推荐

  1. 基于JAVA语言的selenium测试基础总结

    目录一.基本语句1.循环控制(break,continue)3.字符的替换(replace,repalceFirst,replaceAll,regex)4.字符串的连接("+",a ...

  2. 图解Javascript——变量对象和活动对象

    span { line-height: 1.5 } 这是由一段代码引发的思考: var laterDeclaredVar = 'I am a global variable ...'; (functi ...

  3. 简单的add函数的N种写法

    最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手 一开始我是这么写的 function add( ...

  4. golang socket 分析

    socket:tcp/udp.ip构成了网络通信的基石,tcp/ip是面向连接的通信协议 要求建立连接时进行3次握手确保连接已被建立,关闭连接时需要4次通信来保证客户端和,服务端都已经关闭 在通信过程 ...

  5. postman断言作用及怎么使用

    这段时间一直在学习postman,在请求中使用断言,很多人不是很了解postman断言,其实呢,postman断言是JavaScript语言编写的,在postman客户端指定区域编写即可. 1.设置环 ...

  6. Eclipse配置Struts2.x

    问了我同学现在JavaWeb主流框架是哪些.他说基本框架是SSH,struts2+spring+hibernate,流行的是SSM,springmvc+spring+mybatis,原本计划学下Str ...

  7. Scut游戏引擎改造兼容Codis。

    原生的Scut引擎是采用redis来做数据缓存层,引擎在以异步的方式(时间可配置,默认100ms)实现数据同步.为了提高redis的可扩展性.高可用性,把redis换成codis,因为codis有部分 ...

  8. pyqt样式表语法笔记(中)--原创

    pyqt样式表语法笔记(中) pyqt QSS python 样式表 一.弹窗 在日常的各种桌面软件的使用中,我们都会碰到弹窗.例如注册,登录的时候,会有相应的信息弹窗,这里就以信息收集弹窗为例进行弹 ...

  9. 一个web应用的诞生(9)--回到用户

    在开始之前,我们首先根据之前的内容想象一个场景,用户张三在网上浏览,看到了这个轻博客,发现了感兴趣的内容,于是想要为大家分享一下心情,恩?发现需要注册,好,输入用户名,密码,邮箱,并上传头像后,就可以 ...

  10. 《Django By Example》第十二章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第十二章,全书最后一章,终于到这章 ...