H5开发问题总结和jquery bug列表

最新推荐文章于 2022-04-25 16:40:07 发布

TKG09

最新推荐文章于 2022-04-25 16:40:07 发布

阅读量2.1k

点赞数 1

分类专栏： HTML5

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

localstorage sessionstorage 存取对象的问题，

local 和session 都无法直接存取对象，当你定义一个 json 以后通过setItem 和getIem 后发现无法正常使用，应为local session 都是支持字符串的存取，所以这是需要两个步骤第一就是在存的时候吧json 转化成字符串，当取出的时候再把字符串解析成json 例如

Js代码

var person={
id:'xxx10010',
name:'xxx'
}
//存对象
sessionStorage.set("person",JSON.stringify(person));
// 取对象
var p=JSON.parse(sessionStorage.get("person"));

服务器返回状态304

如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码.

简单的表达就是：客户端已经执行了GET，但文件未变化。

服务器对数据进行了缓存，所以直接返回给请求的是缓存数据

jQuery IE 下 show hide 特效消失

IE 浏览器下jquery 的一个bug 在 div 内部嵌套的div 如果有 top left 属性动画效果会失效例如

jQuery IE 下一个兼容性问题

$("dom") 当jQuery 引用一个dom后这个dom被删除掉，在ff或者chrome 下我们可以通过 append($(dom)) 原先引用的这个dom进行复原，但是ie下不支持这个炒作，如果dom删掉无法在使用这个jquery对象，例如$(dom).html() 都是不能操作的。

jQuery IE 6 7 中事件对象属性timestamp为undefined

我们某些时候是使用事件处理的一些高级特性，这里会有一个基本的事件冒泡的基本原理，就是事件源产生事件后会向上传递，但是冒泡时候不会使用同一个事件对象，代码说明

Html代码

<div id='f'>
<div id='p'>
xxxxxxxxx
</div>
</div>

以这个dom结构说明

Js代码

$(document).on("click",function(e){
// 当我点击内层div的时候会事件是会委托传递到document
// 上下两个都可以捕获到事件e ，但是这两个事件e并不是同一个e对象
// 所以在前置处理中传递数据参数都是不能通过e 设置的，但是这里有一个细节就是只要事件进行委托传递，所有捕获的时间对象中e.timeStamp 的值是一样的，这个值非常有用，有助于确定事件源，但是这个重要的属性在IE6,7,8 中是undefined 所以如果考虑兼容6,7,8就在在代码中对这个属性进行处理
})
$("#p").on("click",function(){
})

所以当在 ie 6,7,8中如何使用时间对象中的timestamp请考虑到兼容的问题

zepto 1.1.4 中data()bug

1.1.4中data 希望还原数据的原本类型，例如“123123123123123564” 但是在还原的过程中的精度有损失，变成12312312312312500，导致大量的订单重复问题，1.1.6中则没有这种问题

HTML 自定义属性兼容性问题

为HTML元素添加一自定义的属性非常方便，只须将其加到尖括号中即可，与内置属性地位相等。

如我们要为TextBox元素添加属性idvalue：

只须在原来的控件后面加上：idvalue=”…”,成为:

idvalue即可正式成为txtInput的属性，地位与其他属性相等

IE 下自定义属性可以直接通过document.getElementById("txtInput").idvalue

取值

但idvalue在Firefox中却不能通过，主要是因为Firefox控制严格，所以这些自定义属性不能认识。经过调试，只能用document.getElementById("txtInput").attributes["idvalue"].nodeValue取得下也可以通过这个方式取得

jQuery 中$("").attr("checked")版本问题

jQuery 1.7 一下可以使用这种方式判断check是否选中，但是1.10 中只能使用is(":checked")的方式判断选中状态，坑爹

关于html 的keyup事件在H5 mobile 设备中不兼容的解决，完美解决监听输入框的输入状态

在开发h5应用的时候有个搜索提示功能，但凡这种功能肯定是要借助keyup事件的，功能完成测试主要是模拟测试和Android设备的测试没有发现问题上线后，发现在ios设备上这个搜索功能有bug ，keyup不是完全失效，而是有问题反正是比较反常，无法达到预期效果，研究了一下发现很多ios设备有这些问题，有些是越狱后有问题，总之keyup不具有这种功能，想办法找替代品，

这里要提到html5的新form 事件oninput

oninput：HTML5将oninput事件标准化了，该事件用来检测用户的输入状态。当然，通过使用onkeydown或者onkeyup作为代替也是可以的，这些事件设计本意也并非如此，所以我们如果在H5 mobile开发中需要检测用户输入状态的都最好使用oninput 事件这样就完美解决了上述的各种问你，PC浏览器IE9以后才兼容这个事件，当然IE还有一个特有的检测用户输入状态的事件propertypechange 可以再低版本的ie代替oninput 事件

jQuery select 事件bug

Html代码

<html>
<head>
<script type="text/javascript" src="res/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(e){
$("input").after("1111111111,");
//e.preventDefault();
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>

这段代码很简单，就是绑定input 的select 事件，然后通过trigger 主动触发事件，按照道理是应该执行一次，但是在chrome 执行了两次或者三次，如果增加的e.preventDefault();就会恢复正常，证明chrome 在处理select 事件的时候是和ff ie 有所不同，带有了浏览器的缺省行为，所以导致了二次执行，1.7 和1.11 版本都有这个问题。

iphone 浏览器与android 浏览器对日期格式解析的差别

例如 new Date( "2014-10-9").getTime() android 浏览器是识别的，ios 没法识别这个格式数据

iphone 浏览器与android 浏览器对click touch 等事件的差异

这个android 与ois 有非常多的差别，具体为

1：手机浏览器有双击放大的操作，ios 和android 对click 都有延时的处理大概200ms，因为浏览会看用户是不是有双击浏览器的动作

2：如果android 设置了viewport 为禁止所以，那么浏览器就不会等待200ms 的延迟，ios没有这个属性

3：ois 在处理touch事件的时候会冒泡多父级的click 事件，非常恶心

手机无痕浏览时候对h5 的影响

ios 和安卓的无痕浏览会对sessionStorage 产生影响，无法使用sessionStorage 的setItem getItem 等属性，所以当用户使用无痕浏览的时候会产生bug ，如果处理这个问题可以在程序中判断用户的浏览模式，或者使用if（sessionStorage ）代码判断浏览器中是否可以使用

h5 mobile 下scroll 问题

一般开发菜单fix 功能功能在pc下都是通过scroll，但是我们在手机h5开发的时候发现scroll 只能出发一次

就是在滚动结束的时候触发，所以在手机浏览器下常规很多scroll 实现的功能都无法做到，为了解决这个问题需要借助touchmove 事件辅助，touchmove 可以在滑动时候监控前半段，滑动惯性部分是无法监控到的

ios safari 下数字识别为电话

ios safari 的h5页面中发现很多数字会自动识别为电话号码，点击可以自动拨打，这个是移动端safari 做了数字识别，自动判别电话号码，所以给开发带来了很多麻烦，可以通过<metaname="format-detection"content="telephone=no">

指令解决这个问题

IScroll.js 的使用问题

在开发h5 的时候经常有一种场景就是滚动面板，

例如上图的场景，简单的做法就是直接左右div 中直接设置overflow:scroll

这种做法会产生两个问题

1：有滚动条，尤其是有些安卓手机上无法直视，

2：滚动失效

3：点透

无论是视觉还是使用效果都不太好，对于商用比较高的公司业务明显没法胜任，

这种情况下还是选择一个控件解决问题，iscroll.js

官方例子很简单，本想考进去就能使用没想折腾一天才算解决，把问题记录一下

1：例子粘到自己的dom 结构下无法滚动，最后发现是dom 结构问题，iscroll 必须有着一定的dom 结构，如果结构出问题就会导致滚动失效，这个是个很常见问题

2：加载数据后没法滚动，iscroll.js 是个比较蠢的控件，它在初始化的时候会结算panel 的面积产生滚动，我们的数据一般都是动态加载的所以就会导致两个问题a: 原先数据少，现在增加了数据没法出现滚动效果,B:原先数据多现在数据少依然可以滚动，所以当我们每次增加或者减少数据都要调用指定的控件的refresh() 方法

调用这个方法切记在setTimeout()中，

3：浏览器和手机区别，浏览器下可以在隐藏的状态下使用refresh，app 中一定要等div完全出现后（针对动画效果）在使用refresh 才有效。

H5 图片上传问题

问题1，我们在移动端做图片上传基本思想一般都是用一个隐藏的<intpu type='file' style='display:none'> 然后通过一个漂亮的按钮绑定事件trigger("click") 这个dom ，但是jquery中的tirgger 在移动端中对file 不能请作用，ios 和android 的现象都不相同，网上有很多解决办法，我也找到一种就是多次trigger 就可以解决，.trigger("click").trigger("click");

问题2，ios 无法获取canvas 上的图片，图片第一步就是通过dom file 节点把图片文件选中，然后把图片渲染到canvas 中，通过canvas 带有的转base64的方法把图片最终转化为字符串上传到服务器上，但是在ios下会出现频繁的canvas 获取base64 没有内容，有时候正常，android是正常的最后发现原因是在 uploadTemp.reader.addEventListener('load',function(){}); 问题是在文件读取load 事件触发的时候立刻让canvas 读取file的内容会出现无法读取的情况，通过加延时就可以解决

Js代码

uploadTemp.reader.addEventListener('load', $.proxy(function () {
// load 触发以后增加延时
setTimeout(function(){
},100);
});

IOS 下解决 fixed 问题

h5开发常见的问题，通常出现的底部按钮或者顶部header的fixed ，我们在应用fixed的时候非常方便可以把按钮固定在屏幕底部，但是在ios下键盘弹出会顶起这个固定的按钮，按钮就悬在屏幕中间下不去了，除非收起软键盘，看了很多资料都没法解决这个问题，有一天想到一个非常简单的解决方案,主要思路分以下几步

1：监听键盘弹出方法很简单

Js代码