继上一篇 使用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 //