history解决ajax出现的问题

以下内容是关于jquery.history解决ajax的前进后退问题,具体详情请看下文。

本文的前提是基于后台的,所以这里不会考虑seo的问题。同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!!

事件描述:

H5增加了一个事件window.onpopstate,当用户点击那两个按钮就会触 发这个事件。但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex。通过 history的pushState方法可以做到,pushState(pageIndex)将当前页的pageIndex存起来,再返回到这个 页面时获取到这个pageIndex。

window.history.pushState描述:

window.history.pushState(state, title, url);

登录后复制

state对象:是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。

title:firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。

url:用来传递新的history实体的URL,浏览器将不会在调用pushState()方法后加载这个URL。也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

直接贴代码:

         (      loadData=         pageIndex:window.history.state===?1                  init:             .getData(                       getData:              that=                  type:'post'                 url:'./data/getMovices'+pageIndex+'.json'                 dataType:'json'                 async:                 success:             renderDom:              bookHtml=                 ""+                 ""+                 ">"+                 ""+                 ""+                 ""             ( i=0;i<movies.length;i++                 bookHtml +=                     "" +                     "   " +                     "   " +                     "   " +                     ""              bookHtml+="
电影导演上映时间
" + movies[i].moviesName + "" + movies[i].moviesEditor + "" + movies[i].times + "
" bookHtml += "" + "" $('body' nextPage: that= $(document).on("click",".nextPage", that.pageIndex++ window.history.pushState({page:that.pageIndex}, window.addEventListener("popstate", page=0 (event.state!== page= console.log('page:'+ console.log('page:'+ loadData.pageIndex= })(jQuery,window,undefined);

登录后复制

通过直接在html页面调用js文件就可看到运行结果。

运行结果:

history解决ajax出现的问题

这样就可以达到通过ajax进行交互也能实现监听前进/后台/刷新的功能了。

 附浏览器兼容性:

history解决ajax出现的问题

以上就是history解决ajax出现的问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2910420.html

(0)
上一篇 2025年3月11日 04:32:47
下一篇 2025年2月26日 11:27:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论