popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发。H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操作的。浏览器默认的history还是传统的那一套,虽然他们在浏览器上都是使用同一个“历史记录堆栈”,对这个差异的认知就是造成低版本webkit首次加载触发的原因。webkit并没有把H5的history和传统区分开,而根据官方文档对popstate的描述,只要访问历史记录就会触发popstate。而传统的history中访问页面和生产历史记录是同时的,所以在webkit中无论是刷新还是访问一个新页面都会触发popstate,而其他浏览器中这个popstate仅作用于H5的history,并不影响传统的history。

解决方案:

1、对popstate进行延迟绑定,因为popstate会在页面加载完成之后不久触发,所以在setTimeout一段时间之后再绑定事件。

2、判断浏览器再做调整,直接针对webkit在页面加载完成后第一次触发的popstate里屏蔽了。

 

例如: 

修改前:

window.addEventListener('popstate', function() {
    // todo
},false);

修改后:

window.addEventListener('load', function(){
   setTimeout(function(){
       window.addEventListener('popstate', function() {
           // todo
       },false);
    })
})  

  

posted on 2019-04-12 17:48  hmyCheryl  阅读(447)  评论(0编辑  收藏  举报