开发者社区> 安冉.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端特殊错误,Bug汇总

简介: 一直在做移动端的网页,遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容,这里总结一下,也是对自己的一个知识梳理 JavaScript UC白屏问题 错误表现:网页在微信和QQ内置浏览器访问正常,但是UC和大部分的手机自带浏览器访问页面会出现白屏,打印调试后发现,JS代码一句都没有执行。
+关注继续查看

一直在做移动端的网页,遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容,这里总结一下,也是对自己的一个知识梳理

JavaScript

  • UC白屏问题

    错误表现:网页在微信和QQ内置浏览器访问正常,但是UC和大部分的手机自带浏览器访问页面会出现白屏,打印调试后发现,JS代码一句都没有执行。

    解决:这种问题是因为使用了浏览器不支持的语法导致的,第一种是ES6没有转换为ES5。但是很多人使用了Babel转义后依然会出现这种情况,这就是第二种错误:使用了浏览器不支持的Api。某些函数方法是不会被Babel转义的,但是浏览器依然不支持。例如Object.freeze()冻结函数,使用了这个方法后即使进行Babel转义,UC和自带浏览器中也会出现白屏。

// 特意去babel官网去测试了一下,只是比原代码多加了一个 'use strict'

Object.freeze({ a: 0 })

// =>

"use strict";

Object.freeze({ a: 0 });

这样的 Api 应该有很多,如果项目中出现了这个错误,不知道错误具体出现在哪儿,那就只能用二分法慢慢排除了。

  • UC浏览器返回上一页不刷新页面

    表现:这个属于浏览器的特殊行为了,特点是UC浏览器返回上一页时不会更新页面。

    解决

// 第一种方法,强制刷新页面,当从pageB返回到pageA时,刷新页面
//(pageA => pageB => pageA => upDated)
$(window).on('pageshow', function (evt) {
  setTimeout(function () {
    if (evt.persisted) {
      location.reload(true)
    }
  }, 10)
})
// 第二种方法,在跳转到新的页面前把页面回归到想要的状态
//(pageA => upDated=> pageB)
// 在pageA 跳转到pageB前执行
btn.onclick = function() {
  setTimeout(function() {
    upDated() // 更新待会返回时想要的页面的状态
  }, 0)
  location.href = "{{跳转的域名}}"
}
  • 移动端浏览器左右滑动导致的BUG

    表现:现在的手机浏览器很多都自带左右滑动前进后退的,但是如果你有一个轮播图或其他一些触发touch事件的元素,有时就会和浏览器自带的行为有冲突。

    解决: 在touchstart中加入e.preventDefault()可以阻止浏览器的自带行为。然后会发现click事件无法触发了,在移动端,浏览器认为执行了touchstart和touchend才算一次完整的点击,但是由于在touchstart中加入了e.preventDefault()导致点击事件不能触发,这时如果要出发click事件可以把e.preventDefault()放入touchmove事件中。就可以完美执行了。
    但是在UC浏览器下,使用了e.preventDefault()后有时还会触发UC自带的行为,需要注意。。。

    再附一篇相关博文

    移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

CSS

  • IOS点击不触发事件回调函数

    错误表现:在IOS中,点击非a标签的元素无法触发点击事件。

    解决:这种情况出现在动态添加的Dom节点上,即使使用了事件代理,或者在Dom被添加后进行绑定都不会触发元素绑定的JS事件。解决方法是给Dom元素添加样式 cursor: pointer; 这样就可以正确触发事件了。

  • IOS下为元素添加overflow样式滑动变卡

    错误表现:在IOS中,元素添加了overflow样式后,滑动惯性会被取消,导致滑动不顺畅。

    解决:可以给元素添加-webkit-overflow-scrolling: touch;样式,解决一切滑动不顺畅问题,但是IOS下使用-webkit-overflow-scrolling: touch;会导致另外的Bug,position定位的元素如果和设置了overflow的元素是兄弟关系或父子关系,会导致定位元素也会随着一起滚动,需要注意。

  • 系统版本过低导致flex布局失效

    错误表现:移动设备的系统版本过低时,flex布局失效

    解决:设置display: flex;样式的子元素,必须是块级元素,否则失效(必须设置display: block;)。还有一点要注意,flex-wrap低版本的系统是完全不支持的,可以用display: inline-block;替代。

原文链接:http://blog.csdn.net/qq_25243451/article/details/78811776

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端学习64-自定义事件
前端学习64-自定义事件
4 0
前端周刊第二十八期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
32 0
前端周刊第十九期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
32 0
前端周刊第一期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
76 0
多端统一开发框架 - Taro
现如今市面上端的形态多种多样,Web、App 端(React Native)、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
2899 0
【前端】js转码
js转码 function urlencode (str) { str = (str + '').toString(); return encodeURIComponent(str).
626 0
安全站点汇总
 http://blog.csdn.net/amxsa/archive/2007/06/25/1666030.aspx
443 0
+关注
12
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载