这里会汇总一些移动设备(手机)的内置浏览器兼容性的js函数问题:
1、for... of... 坑爹指数:★★★★
for-of loop是ES6的语法,比较新,导致部分Android手机不支持,例如【华为】
当一个React的项目在多数手机正常运行时,这个时候有些手机就是不支持这个函数。原因是由于内置浏览器的版本过低,不支持一些新的JS函数。
解决:使用 原生for循环或forEach函数代替。
ps 事现日期:2016-06-23
2、str.startWith 坑爹指数:★★★★
这个也是js一些新的特性,当你在享受js操作字符串便利的同时,也承担着多数内置浏览器不兼容的风险,例如【华为】【低版本的iPhone】
解决:使用字符串的 indexOf() 函数替代
ps 事现日期:2016-04-103、str.search 坑爹指数:★★★★
这个也是js一些新的特性,当你在享受js操作字符串便利的同时,也承担着多数内置浏览器不兼容的风险,例如【华为】【低版本的iPhone】
解决:使用字符串的 indexOf() 函数替代
ps 事现日期:2015-04-08
4、window.open 坑爹指数:★★★
由于它打开的页面是popup类型,导致部分手机浏览器会阻挡并拦截弹窗,根本弹不出来,接下去的步骤就无法完成了。
解决:使用字符串的 window.location.href 函数替代
ps 事现日期:2015-10-10
5、ES2015 `` 语法 坑爹指数:★★★
这是ES6的新语法,支持字符串占位、换行拼接,很是好用,实际使用中,Android绝大多数浏览器不支持该函数,iPhone支持该语法。
`${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()} ${hour}:00:00`
解决:使用字符串的 ‘ + ’ 函数替代
today.getFullYear()+'-'+(today.getMonth() + 1)+'-'+today.getDate()+' '+hour+':00:00';
ps 事现日期:2016-03-24
6、[...Array(size).keys()] 坑爹指数:★★
这个是ES6的函数,在React项目中即使通过Babel编译,依旧会有部分低版本内核的手机浏览器不支持,例如华为等,导致js操作被阻断,接下去的步骤就无法完成了。
解决:使用 Array.apply(null, {length: size}) 函数替代
ps 事现日期:2016-04-15
7、ES6 数据解构之数组解构 坑爹指数:★★★
const [touchObj] = e.touches; 数据解构在Es6中很是常见,可是Android和Ios都不支持,只好放弃。
解决:使用原始获取数组下标 const touchObj = e.touches[0]; 函数替代
ps 事现日期:2016-08-10
8、IOS不支持js onBlur事件 坑爹指数:★★★
<input onFocus="alert('Support')" onBlur="alert('Not support Yet')">
解决:官方已知未解决Bug
参考: https://jira.appcelerator.org/browse/TIMOB-17343
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
解决思路:在整个可点击区域添加浮层,点击后模拟触发onBlur事件。
ps 事现日期:2016-10-20
9、Android不支持css scale缩放动画 坑爹指数:★★★★★
@keyframes scaleImg { from { transform: scale(1); } to { transform: scale(1.2); } }
解决:官方已知未解决Bug
参考:https://code.google.com/p/android/issues/detail?id=12451
解决思路:1)不使用动画 2)使用gif替换
/*Method 3*/ @-webkit-keyframes scaleImg { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.2); } }
ps 事现日期:2017-05-10
10、ES6 Array.prototype.find() 坑爹指数:★★★
es6新增的数组find函数,可根据需求搜索子项,Android6以下版本部分手机不支持。
解决:使用数组的 filter 函数替代,find返回子项,记得filter的时候取数组的index=0.
ps 事现日期:2017-03-16
11、ES6 Promise() 坑爹指数:★★★★
es6新增的Promise函数,主要用来解决js异步加载的问题,iPhone很积极的已经更新,但是低版本的iPhone和部分低版本的Android手机浏览器内核还不支持该函数,导致处理报错。
解决:复写Promise函数或使用bluebird.js兼容Promise函数,也可以使用babel转换代码,亦可以使用回调函数替代Promise写法.
ps 事现日期:2017-06-20
关于更多兼容性问题不断更新中。
若遇到其他不兼容的问题,请评论告诉我,我来整理,让更多坑里的人爬起来。
相关推荐
案例:indexOf 在ECMA-262 标准 的第5版中被加入,但并非所有的浏览器都支持该方法。你可以在编写scripts时,在其开头使用以下代码,它能够允许你在没有本地支持的情况下使用indexOf方法。该算法符合ECMA-262第5版...
JavaScript内置函数与内置对象.doc
前端开发中常常会遇见ie版本兼容性问题,为了统一解决在开发中遇见的各种元素获取问题和一些样式获取问题,封装函数工具包,使用时调用工具包。
采用谷歌内核CefSharp进行开发,主要是为了实现JS交互,实现前端JS调用原生能力,如:相机、VLC视频能力(主要播放流视频)等。 实现主要功能: 浏览器标签、HTML页面能播放视频、下载记录、JS交互(能调用原生相机...
Ajax的通用函数,兼容IE chrome firefox
js Date()日期函数浏览器兼容问题解决方法.docx
综合案例(函数的定义) 函数的定义 JavaScript Web前端开发技术 综合案例 案例展示: 案例1-放大镜效果 综合案例 案例1-放大镜效果 案例设计分析图: 综合案例 案例实现: 案例1-放大镜效果 放大镜结构 综合案例 ...
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程,涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
js常用函数封装,cookie、dom操作、自适应浏览器前缀、函数节流等
把浏览器打印的功能保留并赋予到自己添加的按钮当中,可以在点击按钮的同时触发自定义的函数
前端开发常用的12个函数
更高效的学习JavaScript和jQuery,快速成为一名Web前端工程师,零基础快速掌握 作者:(美)达科特(Duckett, J.)出版社:清华大学出版社 第1章 编程基础知识 第2章 JavaScript基础指令 第3章 函数、方法与对象 第4章 ...
matlab开发-不使用内置函数查找图像的直方图。图像直方图
[原创]K8swf Flash背景透明JS函数代码 兼容IE,FF,OP,谷哥等浏览器 /by QQ吻 QQ:396890445 CrAcK8_编程小组[K.8]
trim()在Ie中不支持,需要在使用钱加上这句话。
js 函数 javaScript 自定义函数一览表 js 函数 javaScript 自定义函数一览表
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程,涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
java freemarker 常用内置函数
VB版超级API函数浏览器,自带函数库,可以当作你的VB编程查询手册来使用,小巧灵活,分类清淅。而且它还可以允许你添加、修改函数;带有全部的源代码,在VB6下顺利编译,你在当作手册用的同时还可以研究一下它的源码...
python内置函数大全 python内置函数大全 python内置函数大全 python内置函数大全