网站建设费的摊销,邯郸网络运营中心电话,网站我优化,郑州建设最新消息全站Ajax后退有两种方法#xff0c;浏览器后退按钮加入历史链接。其中一种是常规的Ajax后退#xff0c;这种后退是带有ajax效果的#xff0c;要重新请求历史链接页面。另一种是将历史数据保存#xff0c;后退时取出缓存的数据即可。后者比前者效率要高#xff0c;所以速度…全站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, urlwindow.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的后面。
