大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何通过history解决ajax不支持前进/后退/刷新的问题

这篇文章主要介绍如何通过history解决ajax不支持前进/后退/刷新的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联主要业务有网站营销策划、成都网站制作、网站设计、微信公众号开发、微信小程序成都h5网站建设、程序开发等业务。一次合作终身朋友,是我们奉行的宗旨;我们不仅仅把客户当客户,还把客户视为我们的合作伙伴,在开展业务的过程中,公司还积累了丰富的行业经验、成都全网营销资源和合作伙伴关系资源,并逐渐建立起规范的客户服务和保障体系。 

前言:

现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键。

但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug。

事件描述:

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。

直接贴代码:

/**
 * Created: Aaron.
 * address: http://www.cnblogs.com/aaron-pan/
 */

//var pageIndex=window.history.state===null?0:window.history.state.page;

(function($,window,undefined){
  var loadData={
    pageIndex:window.history.state===null?1:window.history.state.page,
    //pageIndex:0,
    init:function(){
      this.getData(this.pageIndex);
      this.nextPage();
    },
    getData:function(pageIndex){
      var that=this;
      $.ajax({
        type:'post',
        url:'./data/getMovices'+pageIndex+'.json',
        dataType:'json',
        async:false,
        success:function(data){
          that.renderDom(data);
        }
      })
    },
    renderDom:function(movies){
      var bookHtml=
        ""+
        ""+
        ">"+
        ""+
        ""+
        "";
      for(var i=0;i" +
          "  " +
          "  " +
          "  " +
          "";
      }
      bookHtml+="
电影导演上映时间
" + movies[i].moviesName + "" + movies[i].moviesEditor + "" + movies[i].times + "
";       bookHtml +=         "" +         "下一页";       $('body').html(bookHtml);     },     nextPage:function(){       var that=this;       $(document).on("click",".nextPage",function(){         that.pageIndex++;         that.getData(that.pageIndex);         window.history.pushState({page:that.pageIndex},null,window.location.href);         //后退and刷新回到首页 window.history.replaceState({page:that.pageIndex},null,window.location.href);       })     },   };   loadData.init();   window.addEventListener("popstate",function(event){     var page=0;     if(event.state!==null){       page=event.state.page;       console.log('page:'+page);     }     console.log('page:'+page);     loadData.getData(page);     loadData.pageIndex=page;   }) })(jQuery,window,undefined);

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

运行结果:

如何通过history解决ajax不支持前进/后退/刷新的问题

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

附浏览器兼容性:

如何通过history解决ajax不支持前进/后退/刷新的问题

以上是“如何通过history解决ajax不支持前进/后退/刷新的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站栏目:如何通过history解决ajax不支持前进/后退/刷新的问题
文章出自:http://dzwzjz.com/article/gsejii.html
在线咨询
服务热线
服务热线:028-86922220
TOP