采用AJAX+historyapi做无刷新页面的分页-创新互联
大家都知道浏览器有一个history对象是用来保存浏览历史的,比如一个窗口访问了两个个页面,那么history.length属性等于2.
创新互联公司主要从事成都网站制作、成都网站设计、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务卢龙,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220history api在H5时代新增了两个方法,pushState和replaceState
从名字就可以知道一个是新增一条记录一个是改变当前那么记录。
用AJAX加history做分页的好处就是既提高了用户体验,支持前进后退,加快页面加载速度又对搜索引擎十分友好
首先我们来判断浏览器是否支持pushState/replaceState
if(!!(windows.history && history.pushState)){ //支持 }else{ //不支持 }
接着我们要给当前页面添加一个State,添加之前先了解一下这两个新方法
pushState和replaceState一样有三个参数
state: 一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:页面的标题,但是目前所有浏览器都忽略这个值,因此这里可以填null/false
url:新的网址,为了防止恶意代码此处必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
replaceState与pushState不同的地方在于前是修改后者是新增。
那么现在就给页面添加一个State:
history.pushState({page:"page_2.html"},"page 2","page_2.html"}
执行这个操作后,浏览器URL会变成 www.website.com/page_2.html,但并不会进行跳转,甚至不会对这个地址进行检查是否存在。
于此同时我们通过ajax加载页面内容,代码如下
$('a').on("click",function(e){ if(!!(windows.history && history.pushState)){ e.preventDefault() history.pushState({page:"page_2.html"},"page 2","page_2.html"} ajax(page) //ajax代码就省略了,无非是局部加载内容 }else{ //不支持此方法 } })
这样我们就完成了点击分页后添加state和加载页面内容
那当用户点击前进/后退,我们该怎么办?
这时候就要用到popstate事件。
当用户点击前进/后退或在javascript中调用history.back/forward/go时就会触发popstate事件
$(window).on("popstate",function(){ ajax(page) })
这是还要特别注意一下,在webkit浏览器中(最新的chrome已经改正这个问题,大概是chrome 20版本之前会有这个问题,Safari的高版本没测),第一次加载页面也会触发popstate事件,所以我们也要对第一次加载进行判断
$(window).on("popstate",function(e){ var first_onload = (e.originalEvent.State == null) if(first_onload){ return false; } ajax(page) })
由于我们对第一次加载添加了state等于null的判断,所以我们必须在第一次加载改变state,否则当用户后退到第一个页面时state又等于null,ajax就不会执行,页面内容也无法更新了
history.replaceState({{page:"page_1.html"},"page 1","page_1.html")
这样一来,整个代码就完成了,完整代码如下
function Pagination(){ $('a').on("click",function(e){ if(!!(windows.history && history.pushState)){ e.preventDefault() var page_url = $(this).attr("page_url")//获取page信息,根据你的需要而变 history.pushState({page: page_url},false,page_url) ajax(page_url) //ajax代码就省略了,无非是局部加载内容 }else{ //不支持此方法 } }) $(window).on("popstate",function(e){ var first_onload = (e.originalEvent.State == null) if(first_onload){ history.replaceState({page: window.location.href},page: document.title,page: window.location.href) //给第一次加载改变state,也可以写到函数的最后 return false; } var page_url = $(this).attr("page_url")//获取page信息,根据你的需要而变 ajax(page_url) }) }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:采用AJAX+historyapi做无刷新页面的分页-创新互联
标题网址:http://pwwzsj.com/article/codjgp.html