全站Ajax后退有两种方法,浏览器后退按钮加入历史链接。其中一种是常规的Ajax后退,这种后退是带有ajax效果的,要重新请求历史链接页面。另一种是将历史数据保存,后退时取出缓存的数据即可。后者比前者效率要高,所以速度也快,就跟平常无ajax的页面后退一样。
下面就是介绍这种方法,与此同时我们还要解决Chrome浏览器首次载入网站时出现的AJAX效果重载(reload)的现象。
我们需要两个函数,以及对其中一个函数进行全局变量初始化,要添加进入js的主要代码如下:
// 初始化载入-全局变量 $(document).ready(function(){ bind_popstate_once(); // 页面载入初始一次(解决Chrome首次载入出现ajax效果的问题) }); //函数:更新浏览器历史缓存(用于浏览器后退) function update_page_historyState(){ history.replaceState( // 刷新历史点保存的数据,给state填入正确的内容 { url: window.document.location.href, title: window.document.title, html: $('#left').prop('outerHTML'), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(document).find('#left').html() }, window.document.title, document.location.href); } //函数:页面载入初始一次,解决Chrome浏览器初始载入时产生ajax效果的问题 function bind_popstate_once(){ window.addEventListener( 'popstate', function( e ){ //监听浏览器后退事件 if( e.state ){ document.title = e.state.title; $('#left').html( e.state.html ); //也可以用replaceWith ,最后这个html就是上面替换State后里面的html值 $.featureList($("#sl-posts li a"),$("#output li"), {start_item:0});// 重载幻灯片-1 //返回锚点(顶部) //var anchor = location.hash.indexOf('#'); // 用indexOf检查location.href中是否含有'#'号,如果没有则返回值为-1 //if (anchor == -1) { // 若不含#号 // body_am(0); // 直接返回顶部 //} else { // anchor = window.location.hash.substring(anchor + 1); // body_am(anchor); //} } }); }
接下来是ajax事件内success: function(data){ ... }内利用到html5的API —— pushState提交链接到历史中,一般添加到success的最后:
if (msg != 'back' && msg != 'comment') { // 不为后退 也 不为评论回复时 var state = { // 设置state参数 url: paraUrl, title: $(data).filter("title").text(), html: $(data).find("#left").html(), }; // 将当前url和历史url添加到浏览器当中,用于后退。里面三个值分别是: state, title, url window.history.pushState(state, $(data).filter("title").text(), historyUrl); }
(若少了这个或window.history.pushState的三个值有误,有可能无法后退或无法前进)
上面是两个函数,update_page_historyState()函数用在ajax加载时,因为它是更新历史页面缓存的,要放在pushState事件之前,这样也可以加入 beforesend 里面。 以上基本上就全部OK了,当然,返回顶部事件随个人喜好加,上面注释位置里已经有返回锚点了。
2014-10-14补充:值得注意的是,如果#left里面加载有其他js的插件效果,比如幻灯片,那么就需要在bind_popstate_once()函数里面重载一遍,和ajax的重载一个道理。
2014-10-15补充:点击侧栏的评论切换页面后发现点击其他链接时地址栏不会变,只有页面改变,这是由于返回锚点函数引起的,检查链接中带有#号的问题,将返回锚点放在complete里面即可,也就是window.history.pushState的后面。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4198.html