在htc某些机型下seajs加载css未触发onload回调 #1073

Closed
lynsun opened this Issue Jan 2, 2014 · 8 comments

Projects

None yet

4 participants

@lynsun
lynsun commented Jan 2, 2014

hi,玉伯,我在开发一个webapp时遇到一个问题,初步找到重现的方法是在js模块里require一个css,而css加载完成的回调未执行,导致依赖这个css的js的onload也未执行,我的测试机型是HTC-T328d,浏览器为手机自带的,userAgent为:
Mozilla/5.0(Linux;U;Android4.0.3;zh-cn;HTC-T328d/1.67.1401.3) AndroidWebKit/534.30(KHTML,Like Gecko) Version/4.0 Mobile Safari/534.30

深入到seajs源码中继续定位,发现这种机型有两个问题:
1 supportOnload = ‘onload’ in node返回true,但是通过创建link标签加载css却无法触发onload
2 ua中没有AppleWebkit,而是AndroidWebkit,导致seajs判断是否为老版本的webkit时错误
var isOldWebKit = +navigator.userAgent
.replace(/.AppleWebKit/(\d+)../, "$1") < 536

之后导致seajs在addOnload方法中错误的进入了supportonload的分支
if (isCSS && (isOldWebKit || !supportOnload)) {
setTimeout(function() {
pollCss(node, callback)
}, 1) // Begin after node insertion
return
}

而在这款手机上安装的UC浏览器里其ua为AppleWebkit/530+ ,这个也导致seajs判断isOldWebKit时错误

修改判断isOldWebKit的正则为/.(?:AppleWebKit|AndroidWebKit)/(\d+)./后正常(其实是把AndroidWebkit低于536的也视为旧版本的webkit,同时去掉了版本号后一定带小数点的限制),但是不知道这样改会不会造成其他问题

@binggege
binggege commented Jan 6, 2014

我的coolpad 8190也出现过这种问题,我改成使用异步加载就没有问题了(虽然对于css文件没有同步异步之说)

@lynsun
lynsun commented Jan 6, 2014

改为异步加载可以绕过这个问题,但是模块渲染完毕css却未加载完毕的时候会显示错乱,还是需要把样式作为依赖去加载的

@lynsun
lynsun commented Jan 6, 2014

貌似下一个版本的seajs会手机优先,希望到时候可以fix这个问题

@army8735
Member
army8735 commented Mar 7, 2014

http://www.useragentstring.com/pages/Android%20Webkit%20Browser/
貌似有很多AppleWebkit的问题
3.0去掉的话手机端会大受影响。我的魅族mx3是AppleWebkit/534.50
不过楼主的AndroidWebkit搜索,居然能找到http://myip.ms/view/comp_browseragents/371883/Mozilla_5_0_Linux_U_Android_2_3_6_zh_cn_HTC_X515d_1_09_1401_13_AndroidWebKit_533_1_KHTML_Like_Gecko_Version_4_0_Mobile_Safari_533_1.html
里面有很多类似的ua

@army8735
Member
army8735 commented Mar 7, 2014

查了下,ipad上问题比较大,ios6上有很多低于safari6的,
Mozilla/5.0 (iPad; CPU OS 601 like Mac OS X; tr-tr) AppleWebKit/534.46.0 (KHTML like Gecko) CriOS/21.0.1180.82 Mobile/10A523 Safari/7534.48.3
都会有css onload的问题,版本低于535.23,实际得找台测试机来测试一下是否支持onload

@army8735
Member
army8735 commented Mar 7, 2014

楼主clone下最新代码试一试,手头暂时找不到htc的机型

@army8735 army8735 closed this Mar 10, 2014
@army8735 army8735 added this to the 2.2.1 milestone Mar 19, 2014
@army8735 army8735 self-assigned this Mar 19, 2014
@army8735
Member

2.2.1中修复了此bug。

@lincheng0803

请问下,为什么判断版本号低于536的为旧版的webkit呢?有啥资料吗? 现在问题是这样的,我的魅族,userAgent为 "Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; MX4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Mobile Safari/537.36" ,它被判断为新版webkit,且 supportOnload = ‘onload’ in node返回true,但是通过创建link标签加载css却无法触发onload,所以导致后续的代码无法被回调执行。把版本改为低于538,可以正常运行,就是不知道会不会引起其他问题?谢谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment