popstate事件在低版本webkit中的调用
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中的调用的更多相关文章
- Android 低版本sdk中没有getSupportedPreviewSizes和getSupportedPictureSizes函数怎么办?
在做camera和SurfaceView做摄像头程序时,需要获取camera支持的相片大小,在低版本sdk中没有getSupportedPictureSizes函数,怎么办呢,请参阅下面的关键代码: ...
- matchesSelector及低版本IE中对该方法的实现
matchesSelector用来匹配dom元素是否匹配某css selector.它为一些高级方法的实现提供了基础支持,比如事件代理,parent, closest等. W3C在2006年就提出了该 ...
- js动态加载activeX控件在IE11与低版本IE中的差异
由于IE11更加遵循W3C规范,所以IE11与低版本IE在加载activeX时有差别. 1.IE11中动态加载activeX的顺序 var objectTag = document.createEle ...
- 高版本 MySQL 导出的脚本到低版本 MySQL 中执行时报错
导入 MySQL 脚本时报错:[ERR] 1273 - Unknown collation: 'utf8mb4_0900_ai_ci'低版本还不支持 utfmb4 这个字符集 解决方法:将 sql 脚 ...
- 解决backgroud:transparent在低版本浏览器中的bug
今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看 ...
- webkit中DOM 事件有多少
webkit中DOM 事件有多少 目前客户端javascript中大量的工作就是处理浏览器,用户触发的各种事件,下面是webkit中这些事件的集合,有一些时常见的,标准规定的,而另一些则是webkit ...
- SQL Server 临时禁用和启用所有外键约束(高版本向低版本迁移数据)
--获得禁用所有外键约束的语句 select 'ALTER TABLE [' + b.name + '] NOCHECK CONSTRAINT ' + a.name +';' as 禁用约束 from ...
- Highcharts 在低版本 IE 上使用注意事项及个人总结
很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6.IE7.IE8等)下运行出错(图表显示不出来或显示不正常)的情况,这不是兼容性问题,而是 IE 浏览器自身的一些限制,我们只需要注意 ...
- Highcharts 在低版本 IE 上使用注意事项
来源:https://segmentfault.com/a/1190000004272693 很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6.IE7.IE8等)下运行出错(图表显示 ...
随机推荐
- Javascript在使用import 与export 区别及使用
一.import与export的用法 1.import的几种用法 import defautName from 'modules.js'; import { export } from 'module ...
- [dart学习]第四篇:函数和操作符(本篇未完待续)
接着学习dart的函数和操作符. 1.函数Function dart是一种真正的面向对象的语言,通常一个函数也是Function类型的对象,这也就是说可以把函数赋值给一个变量,或者作为另一个函数的入参 ...
- QSettings 类
一 .QSettings介绍: 用户通常希望应用程序记住其设置.在windows中,这些设置保存在注册表中,ios在属性文件列表中,而unix,在缺乏标准的情况下,其存储在ini文本中.QSettin ...
- UML类图新手入门级介绍(转)
首先,看动物矩形框,它代表一个类(Class).类图分三层,第一层显示类的名称,如果是抽象类,则就用斜体显示.第二层是类的特性,通常就是字段和属性.第三层是类的操作,通常是方法或行为.前面的符号,+ ...
- JavaWeb案例:登陆和注册
mvc开发模式简介 M: Model模型 JavaBeanV:view视图 JSPC:Controller控制器 Servlet 其实就是JSP + Servlet + JavaBean上面的Java ...
- 单元测试系列之十:Sonar 常用代码规则整理(二)
摘要:帮助公司部署了一套sonar平台,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分析,避免再次出现类似问题. 作者原创技术文章,转载请注明出处 ======== ...
- FJNU Fang G and his Friends(状压DP)题解
Description 众所周知,fang G 有很多小伙伴,有一天,Fang G 打算带他们去玩有趣的游戏OOXX,这个游戏需要分成两组,有趣的是,每个人互相之间都有一个满意度,大家都想和自 ...
- java三种注释以及参数涵义(转)
原文地址:https://www.cnblogs.com/miys/p/4bf714ce33068dcf9ac6526309c9b5e6.html 单行注释:// 注释内容 多行注释:/*... 注释 ...
- Ubuntu 18.04.1安装Nginx
一.安装Nginx所需的环境 Ubuntu可以通过apt源安装以下依赖库,CentOS可以通过yum安装 1.Nginx是C语言开发,需要gcc依赖库 先检查本机是否有gcc环境 gcc -v 如果没 ...
- SQL Server 视图(仅代码及练习)
use electric go --建立供电局1#仓库所存放物资的视图. create view s1_stock as select * from stock where warehouse='供电 ...