pushState中怎么利用Ajax实现无刷新页面切换,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
一、API
1、pushState
pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。
state:与要跳转到的URL对应的状态信息。
title:空字符串(以后可能有用)。
url:要跳转到的URL地址,不能跨域。
作用:将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。
2、replaceState
history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
3、window.onpopstate
history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
二、实现
场景很简单,点击按钮下面的div中出现不同的图片及标题,使用ajax刷新,并且产生历史管理。
<p class="page"> <a href="javascript:;">[ <span>1</span> ]</a> <a href="javascript:;">[ <span>2</span> ]</a> <a href="javascript:;">[ <span>3</span> ]</a> <a href="javascript:;">[ <span>4</span> ]</a> </p> <div> <img /> <p class="title"></p> </div>
核心代码
function setUrl(page){ var url = location.pathname + '?page=' + page; history.pushState({ url : url },'',url); } //每次点击按钮的时候就往历史记录里面增加一个条目
注意首次载入的时候需要首次载入替换一下历史记录
(function(){ //默认显示第一页 var url = location.pathname + '?page=1'; //修改当前的历史记录 history.replaceState({ url : url },'',url); })()
监听window的popstage事件,事件发生时取到当前历史对应的页码,然后执行ajax
window.addEventListener('popstate',function(){ var page = getPage(); xhr(page); })
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。