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);
})
})

  

popstate事件在低版本webkit中的调用的更多相关文章

  1. Android 低版本sdk中没有getSupportedPreviewSizes和getSupportedPictureSizes函数怎么办?

    在做camera和SurfaceView做摄像头程序时,需要获取camera支持的相片大小,在低版本sdk中没有getSupportedPictureSizes函数,怎么办呢,请参阅下面的关键代码: ...

  2. matchesSelector及低版本IE中对该方法的实现

    matchesSelector用来匹配dom元素是否匹配某css selector.它为一些高级方法的实现提供了基础支持,比如事件代理,parent, closest等. W3C在2006年就提出了该 ...

  3. js动态加载activeX控件在IE11与低版本IE中的差异

    由于IE11更加遵循W3C规范,所以IE11与低版本IE在加载activeX时有差别. 1.IE11中动态加载activeX的顺序 var objectTag = document.createEle ...

  4. 高版本 MySQL 导出的脚本到低版本 MySQL 中执行时报错

    导入 MySQL 脚本时报错:[ERR] 1273 - Unknown collation: 'utf8mb4_0900_ai_ci'低版本还不支持 utfmb4 这个字符集 解决方法:将 sql 脚 ...

  5. 解决backgroud:transparent在低版本浏览器中的bug

    今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看 ...

  6. webkit中DOM 事件有多少

    webkit中DOM 事件有多少 目前客户端javascript中大量的工作就是处理浏览器,用户触发的各种事件,下面是webkit中这些事件的集合,有一些时常见的,标准规定的,而另一些则是webkit ...

  7. SQL Server 临时禁用和启用所有外键约束(高版本向低版本迁移数据)

    --获得禁用所有外键约束的语句 select 'ALTER TABLE [' + b.name + '] NOCHECK CONSTRAINT ' + a.name +';' as 禁用约束 from ...

  8. Highcharts 在低版本 IE 上使用注意事项及个人总结

    很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6.IE7.IE8等)下运行出错(图表显示不出来或显示不正常)的情况,这不是兼容性问题,而是 IE 浏览器自身的一些限制,我们只需要注意 ...

  9. Highcharts 在低版本 IE 上使用注意事项

    来源:https://segmentfault.com/a/1190000004272693 很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6.IE7.IE8等)下运行出错(图表显示 ...

随机推荐

  1. MariaDB与MySQL

    一.MariaDB安装部署 tar zxvf mariadb-5.5.31-linux-x86_64.tar.gz mv mariadb-5.5.31-linux-x86_64 /usr/local/ ...

  2. 文件下载的ie11兼容性优化

    在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有说关于前后端分离时如何实现文件下载的功能,但是过完年回来,同事告诉我这个方式在ie11上存在不兼 ...

  3. 利用h5 meta 头标签设置og属性进行帖子分享图片时而有时而无

    <meta property="og:title" content="fgsfg"> <meta property="og:desc ...

  4. LabVIEW中开放隐藏属性的inikey

    SuperSecretPrivateSpecialStuff=TRUE 在LabVIEW中有很多属性和方法是隐藏的,在labview安装根目录下的ini中添加该信息能开放这些隐藏的属性和方法.这时候能 ...

  5. TeamCity 创建docker构建步骤

    1 dockerfile source 选择dockerfile文件的路径,一共有三种方式: 1.1.1 file content 这种方式是在线写dockerfile文件. 其在进行创建的时候会在 ...

  6. 针对多条件查询,应对 url 无用 null 值现象处理

    多条件查询 应对 url 无用 null 值现象 处理例如:http://xxoo.b2b.com/orders?city_id=5&repertory_id=7&area_id=39 ...

  7. 浅析贝叶斯神经网络(Based on Variational Bayesian)

    https://blog.csdn.net/qq_20195745/article/details/82453589 贝叶斯神经网络简介 对于一个神经网络来说,最为核心的是如何根据训练集的数据,得到各 ...

  8. P2774 方格取数问题(网络流)

    P2774 方格取数问题 emm........仔细一看,这不是最大权闭合子图的题吗! 取一个点$(x,y)$,限制条件是同时取$(x,y+1),(x,y-1),(x+1,y),(x-1,y)$,只不 ...

  9. Android系统分析之运营商显示流程分析之运营商信息的读取流程二

    运营商显示流程分析之运营商信息的读取流程 一. SIM卡运营商信息的读取 从前面的 运营商信息的获取和赋值 可以知道SIM卡运营商的赋值最终是在 SIMRecords 中完成的, 而SIM卡信息的相关 ...

  10. canvas与svg

    canvas与svg都是用于在网页上绘制图形(位图). canvas是HTML5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用JavaScript来画图,可以绘制路径.矩 ...