搜索

查看: 294|回复: 0

有啊网页诊断工具相关总结

[复制链接]

503

主题

0

好友

1874

积分

管理员

发表于 2012-10-29 23:04:35 |显示全部楼层
( 本文出自 百度泛用户体验 )
有啊网页诊断工具是一个轻量级的浏览器环境检测工具,基于Javascript以及Flash实现。它的主要功能包括问题检测以及针对某些问题给予提示性的建议,从而帮助用户自助的解决一些简单的问题。此外还能生成简单的检测报告,通过报告开发人员可是获得更为详细的环境信息,为解决问题提供有效的支持。
该工具具体的检测项包括以下几个:
1. Javascript版本信息
2. Cookie是否开启
3. 用户的屏幕分辨率
4. Flash版本号以及浏览器是否开启了Flash拦截功能
5. 浏览器字体大小是否正常(某些浏览器缩放后会导致页面布局混乱)
6. 浏览器的Ajax功能是否正常,包括Get方式和Post方式
7. 浏览器的图片浏览功能是否正常
8. 用户的网络速度
通过对以上几个问题的检测,开发人员能够比较全面的了解目标浏览器的整体环境。
一、Javascript版本检测
对于Javascript版本的检测似乎显得不是那么必要,因为通常都可以根据浏览器的版本找到对应关系,不过作为浏览器环境的一部分,还是把该功 能加了进来。具体的实现原理:在页面中嵌入各个版本的script标签,并在每个标签中都给同一个全局变量赋值,最后根据变量的值得到版本号:
  1. JS_VERSION=('1.0');   

  2.      
  3. JS_VERSION=('1.1');   

  4.      
  5. JS_VERSION=('1.2');   

  6.       ......
  7.       ......
  8.      
  9. JS_VERSION=('1.3');   

  10.      
  11. window.onload = function(){
  12. if( typeof JS_VERSION != 'undefined' )
  13. document.getElementById('test').innerHTML = JS_VERSION;
  14. }   
复制代码
根据W3C规范,script的language属性已经被废弃了,不过经测试该属性的兼容性较好,并能得到比较准确的结果。如果使用type= “text/javascriptN”则在很多浏览器下得不到正确的版本,因此在此依然使用了language属性。另外,关于javascript各个版本与浏览器的对应关系可以参考如下表格:
VersionRelease dateEquivalent toNetscape
Navigator
Mozilla
Firefox
Internet
Explorer
OperaSafariGoogle
Chrome
1.0March 19962.03.0
1.1August 19963.0
1.2June 19974.0-4.05
1.3October 1998ECMA-262 1st edition / ECMA-262 2nd edition4.06-4.7x4.0
1.4Netscape
Server
1.5November 2000ECMA-262 3rd edition6.01.05.5 (JScript 5.5),
6 (JScript 5.6),
7 (JScript 5.7),
8 (JScript 6)
6.0,
7.0,
8.0,
9.0,
10.0
1.6November 20051.5 + Array extras + Array and String generics + E4X1.53.0, 3.1
1.7October 20061.6 + Pythonic generators + Iterators + let2.03.2, 4.01.0
1.8June 20081.7 + Generator expressions + Expression closures3.0
1.8.11.8 + Native JSON support + Minor Updates3.5
1.8.21.8.1 + Minor updates3.6
1.91.8.1 + ECMAScript 5 Compliance4

相关参考资料:
http://www.w3.org/TR/REC-html40/interact/scripts.html W3C 关于script标签的描述
http://en.wikipedia.org/wiki/JavaScript#Versions 维基百科关于JavaScript中的版本描述
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/JavaScript_Overview JavaScript Versions and ECMAScript Editions
http://hi.baidu.com/jiaozhenqing/blog/item/d8f026380392f22cb9998fc7.html JavaScript版本一览
二、检测Cookie是否开启
先获取window.navigator['cookieEnabled']的值,如果该值非undefined的话则直接使用该值即可判断(经测 试IE7、Firefox3.5、Safari4、Opera10均能支持)。如果为undefined(即不支持该属性)则使用如下的方式:尝试向 Cookie中写入数据(为避免浪费设置1分钟的有效期),写入后检测document.cookie中是否存在刚才写入的数据,如果有则cookie有 效否则cookie无效:
  1. var cookie = document.cookie;
  2. var cookieEnabled = window.navigator['cookieEnabled'];

  3. if(typeof cookieEnabled == 'undefined'){
  4.     var expireDate = new Date();
  5.     expireDate.setTime(expireDate.getTime() + 1000);//Expired after 1 second
  6.     var time = expireDate*1;
  7.     var regExp = new RegExp(time + '=' + time);
  8.     document.cookie = time + '=' + time + ';expires=' + expireDate.toGMTString();
  9.     if( regExp.test(document.cookie) )
  10.        cookieEnabled = true;
  11.     else
  12.        cookieEnabled = false;
  13. }
复制代码
三、Flash版本以及可用性检测
Flash检测包含两方面的内容:
1. Flash是否安装、禁用,Flash版本号
对于Flash的版本检测可以通过在页面中引入AC_OETags.js(包含在Adobe官方的Flash Player Detection Kit中),然后通过调用其中的GetSwfVer方法获得具体的版本号,如果Flash未安装或者被禁用则 GetSwfVer方法将会返回-1,否则返回正确的版本号。查看GetSwfVer的实现,与浏览器版本检测如出一辙,也是通过navigator信息 得到的,感兴趣的可以直接查看其源码。
2. 如果Flash已经安装是否被拦截
做这一步检查的前提是第一步能够获得正确的版本号。具体的检测方法也很简单,在页面中引入一个自定义的swf文件,在该swf文件中只定义 了一个方法checkFlash,并将该方法暴露出来使得JavaScript能够访问到,即 ExternalInterface.addCallback(“checkFlash”,checkFlash);在swf加载完成后通过JavaScript访问checkFlash方法,如 果存在该方法则说明Flash访问正常,否则Flash可能被拦截了。
以上两步的代码实现大致如下:
HTML代码

复制代码
Javascript代码
  1. //获取Flash版本号,如果version为-1则可能未安装Flash或者Flash被禁用
  2.     var version = GetSwfVer();
  3.     if( version != -1 ){
  4.          var isIE = navigator.appVersion.indexOf("MSIE") != -1;
  5.          if( isIE )//IE下取Object元素
  6.             var swfObj = document.getElementById('oCheck');
  7.         else//其他浏览器下取embed元素
  8.             var swfObj = document.getElementById('eCheck');
  9.         if( !swfObj.checkFlash ) {
  10.             //被拦截
  11.         }
  12.         else {
  13.            //未拦截
  14.         }
  15.     }
  16.     else{
  17.         //未安装Flash Player或者Flash Player被禁用
  18.     }
复制代码
参考资料
http://www.adobe.com/products/flashplayer/download/detection_kit/ Flash Player Detection Kit

四、Ajax功能检测
该功能的检测比较直接,即分别构造Ajax Get和Ajax Post请求,在请求过程中详细的记录Ajax的实例类型(ActiveXObject 或 XMLHTTPRequest)、请求的各个阶段的状态以及最终的请求结果。
五、检测图片是否被禁用
检测图片是否禁用的原理:新建一个Image对象,并监听其onload事件(IE某些版本中无效,需要监听onreadystatechange 事件)以及onerror事件。
  1. var img = new Image;
  2. //监听onload事件,由于在ie的某些版本中onload事件并不会被触发,因此增加onreadystatechange监听器
  3. img.onload = img.onreadystatechange = function(){
  4. //加载成功说明图片功能是正常的
  5. }
  6. //监听onerr事件
  7. img.onerror = function(){
  8. //如果触发了onerror事件,则说明图片功能不正常(在img的src正确的情况下)
  9. }
  10. img.src = 'xxx';
复制代码
以上的实现中,对于加载事件的监听并没有什么问题,不过对于onerror事件还是存在比较大的兼容性问题:经测试发现,在IE下禁用图片后并不会触发 onerror事件,而在Firefox中禁用图片后则能正常的触发onerror事件,至此的结论是使用onerror来判断图片功能是准确的。取而代 之的是使用超时检测来判断,即假定图片在一定时间内仍未能加载成功则视为失败。
  1. var img = new Image;
  2. //监听onload事件,由于在ie的某些版本中onload事件并不会被触发,因此增加onreadystatechange监听器
  3. img.onload = img.onreadystatechange = function(){
  4. //加载成功说明图片功能是正常的
  5. }
  6. //监听onerr事件
  7. img.onerror = function(){
  8. //如果触发了onerror事件,则说明图片功能不正常(在img的src正确的情况下)
  9. }
  10. img.src = 'xxx';
  11. var timer = setTimeout(function(){
  12. //如果执行到这里则认为图片功能异常
  13. },TIMEOUT);
复制代码
六、检测网络速度
实现原理:请求一张已知大小的图片N次,并分别记录每次请求所花费的时间,最后根据图片大小计算出平均的网络速度。这里需要注意的是图片的大小问题,图片如果太小结果会不准确,需要选择一张合适的图片,另外为防止图片被浏览器缓存需要给图片的src添加时间戳。
  1. /*
  2. * @param { Integer } times 请求图片的次数
  3. * @callback { Function } callback 图片请求完成后调用的函数
  4. */
  5. function detectNetSpeedWithImage(times,callback){   
  6. times = times || 1;
  7. //已完成请求
  8. var completedImg = 0,
  9. res = [],
  10. timer = null,
  11. done = false;        
  12. for( var i = 0; i < times; i++){
  13. (function( index ){
  14. setTimeout(function(){            
  15. var img = new Image();
  16. //开关,在某些浏览器(如IE)会响应两次onreadystatechange
  17. var loaded = false;
  18. //请求开始时间
  19. var tStart = new Date();
  20. img.onload = img.onreadystatechange = function(){
  21. if( loaded ) return;
  22. //请求结束时间
  23. var tEnd = new Date();
  24. res.push(tEnd - tStart);
  25. //已完成请求加1
  26. completedImg++;
  27. loaded = true;
  28. //全部请求完成后调用callback
  29. if( completedImg == times && callback ){
  30. callback.call(null,res);
  31. if( timer ) clearTimeout(timer);
  32. }
  33. }
  34. img.onerror = function(){
  35. if( done ) return;
  36. callback([]);
  37. done = true;
  38. clearTimeout(timer);
  39. }
  40. img.src = Config.NET_SPEED_DETECT_IMAGE_URL + '?t=' + (new Date())*1;
  41. },index * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
  42. })(i);
  43. }
  44. //超时操作
  45. timer = setTimeout(function(){
  46. if( completedImg != times && !done ){
  47. callback([]);
  48. }
  49. },Config.NET_SPEED_DETECT_TIMEOUT + times * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
  50. }

  51. detectNetSpeedWithImage(Config.NET_SPEED_DETECT_TIMES,function(res){
  52. //失败
  53. if( res.length < 1 ){
  54. _handleError();
  55. }
  56. //成功
  57. else{
  58. var time = 0;
  59. for( var i = 0,l = res.length; i < l; i++){
  60. time += res[i] / ( l * 1000 );
  61. }
  62. //计算速度
  63. var speed = Config.NET_SPEED_DETECT_IMAGE_SIZE / time;
  64. //取小数点后两位
  65. speed = speed.toFixed(2);        
  66. me.isOver = true;   
  67. }
  68. });
复制代码
七、检测客户端分辨率
直接获取window.screen的width与height即可。
八、检测浏览器字体大小是否正常
在IE6下,当使用px作为单位时,元素(字体大小)无法进行缩放,这在很多情况下都会造成页面混乱。另外,对于目前大多数浏览器,在默认字体设置下,1em恰恰等于16px,于是可以根据这个原理来检测浏览器字体是否正常,具体的方式如下:
1. 创建一个DIV元素1,并设定其高为16px,宽为1px并使用CSS将其定位到可视范围之外(不能通过display或visibility隐藏)
2. 创建另一个DIV元素2,并设置其font-size为medium。在该DIV内部创建一个DIV元素3,并设置其高位1em,宽为1px并使用CSS将其定位到可视范围之外
3. 比较元素1和元素3的高度,如果相等则字体大小正常否则异常
注意,元素3必须包含在元素2中,并且给元素2设置font-size: medium。因为em是一个相对单位,1em的大小相当于其父元素字体的大小,为了使检测不受其他样式影响,将其放在一个字体大小为浏览器默认值的容器中。
  1. //隐藏DIV的CSS
  2. var hideCSS = 'position:absolute;left:-2000px;';

  3. //以px为宽度单位的元素
  4. var pxBlock = document.createElement('div');
  5. pxBlock.style.cssText = 'width:16px;height:1px;' + hideCSS;
  6. document.body.appendChild(pxBlock);
  7. //构建一个字体大小为浏览器默认值的容器
  8. var emBlockWrapper = document.createElement('div');
  9. emBlockWrapper.style.fontSize = 'medium';

  10. //以em为字宽度单位的元素
  11. var emBlock = document.createElement('div');
  12. emBlock.style.cssText = 'width:1em;height:1px;' + hideCSS;

  13. emBlockWrapper.appendChild(emBlock);
  14. document.body.appendChild(emBlockWrapper);

  15. //获得固定和变化的div宽度
  16. var pxBlockWidth = pxBlock.offsetWidth;
  17. var emBlockWidth = emBlock.offsetWidth;

  18. if(pxBlockWidth == emBlockWidth){
  19. //字体正常
  20. }
  21. else{
  22. //字体异常
  23. }
复制代码
回复

使用道具 举报

手机版|Archiver|联系我们|w3cvip.com  

GMT+8, 2013-5-7 08:44 , Processed in 0.068505 second(s), 33 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部