javascript框架设计之浏览器的嗅探和特征侦测


Posted in Javascript onJune 23, 2015

浏览器的嗅探现在已经不推荐了,但在某些场合还是需要的。比如一些统计脚本。在标准浏览器里,提供了document.implementation.hasfeature,可惜有bug,不准确,目前,w3c又推出了CSS.supports方法,显示出大家对这块的关注。

1.判定浏览器。

主流的浏览器有ie firefox opera chorme safari 早期这些框架都是通过navigator.userAgent进行判定,目前国外的浏览器几乎都是可以判定的。

关于浏览器的判断脚本,jQuery已经移出本体,形成一个插件。更多的方式不多介绍,

移动设备的相关判定,这个建议看jQuery mobile与zepto的源代码。

    isIPone = /isIPone/i.test(navigator.userAgent);

    isIPone4 = window.devicePixelRatio >= 2 //在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone4是2,有些 安卓机型是1.5

    isIpad = /ipad/i.test(navigator.userAgent)

    isAndroid = /android/i.test(navigator.userAgent)

    isIOS = isIPone || isIpad

国内的浏览器判定可以看Tangrame或qwrap,它们基本是IE,webkit,blink内核。

2.事件的支持侦测

prototype的核心成员kangax写了一篇文章,来判断浏览器对某种事件的支持。里面给出的实现如下:

var isEventSupported = (function() {
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName){
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

现在jQuery等框架都是使用脚本的简化版

不过哪一个也好,这种检测只对DOM0奏效,像DOMMouseScroll DOMContentLoaded DOMFocusIn DOMFocusOut DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInsertedIntoDocument DOMAttrModified DOMCharactorDataModified这些以DOM开头的就无能为力了。

这些事件中,有的非常有用,如DOMMouseScroll,firefox一直不支持mousesheel,只能用它做替代品。
DOMContentLoaded是实现domReady的重要事件;DOMNodeRemoved是判定元素是否从其父节点移除,父节点可能是其它元素节点或文档碎片;DOMNodeRemovedFromDocument 是移离DOM树,DOMAttrModified 以前经常用于模拟IE的onpropertyChange

css3添加两种动画,一种是transition动画,另外一种是keyframe补间动画。它们在事件结束时都用事件回调。但在标准化过程中,浏览器给它们起的名字相当于没规则。这个也需要预先侦测出来。

下面是bootstrap的实现。听说来源于modernizr,比较粗糙。比如你使用的Oprera已经支持不带事件标准事件名。它还是返回oTransitionEnd.

$.supports.transition = (function(){
    var transitionEnd = (function(){
      var el = document.createElement('bootstarp'),
          transEndEventNames = {
            'WebkitTransition':'webkitTransitionEnd',
            'MozTransition':'transitionend',
            'OTransition':'OTransitionEnd otransitionend',
            'transition':'transitionend'
          };
        for (var name in transEndEventNames){
          if (el.style[name] !== undefined){
            return transEndEventNames[name]
          }
        }
    }());
    return transitionEnd && {
      end: transitionEnd
    }
  })();

keyframe补间动画来自mass的fx_neo模块

var eventName = {
    AnimationEvent:'animationend',
    WebKirAnimationEvent: 'WebKirAnimationEnd'
  },animationend;
  for(var name in eventName) {
    if (/object|function/.test(typeof window[name])){
      animationend = eventName[name]
      break
    }
  }

3.样式的支持侦探

css3带来许多好用的样式,但是麻烦的是每个浏览器都有自己的私有前缀,massFramework提供了一个cssName方法来处理它们,有就返回可用的驼峰样式名,没有就null

var prefixes = ['','-webkit-','-o-','-moz-','-ms-'];
  var cssMap = {
    "float" : $.support.cssFloat ? 'cssFloat' : 'styleFloat',background:'backgroundColor'
  };
  function cssName(name, host, camelCase){
    if(cssMap[name]) {
      return cssMap[name];
    }
    host = host || document.documentElement
    for (var i = 0 || n = prefixes.length; i < n; i++) {
      camelCase = $.String.camelize(prefixes[i] + name);
      if (camelCase in host) {
        return (cssMap[name] = camelCase)
      }
    }
    return null
  }

一个样式对于N种样式值,比如display有n种取值,如果要侦测浏览器是否支持某一种,会很麻烦。为此,浏览器做了一个善举,给出一个css.supports的API,如果不支持,则尝试下一个开源项目。显然,不是很完美。

https://github.com/termi/CSS.supports

4.jQuery的一些常用的特征的含义

jQuery在support模块例举了一些常用的DOM特征支持情况,不过名字起的很怪,不同版本差别也很大,本章以jQuery1.8为准。

leadingWhitespace:判定浏览器在进行innerHTML赋值时,是否存在trimLeft操作,这个功能原本是IE发明的,结果其他浏览器认为要忠于以后的原始值,最前面的空白不能神略掉,要变成一个文本节点,最终IE678返回false,其他浏览器返回true

tobody:指在用innerHTML动态创建元素时,浏览器是否会在table内自动补上tobody,jQuery希望浏览器别处理,让jQuery来补全。判断浏览器是否只能插入tobody。在表格布局的年代,这个特性十分受用。如果没有tbody,table会在浏览器解析到闭合标签时才显示出来。如果起始标签和闭合标签相隔很远,换言之,这个表格很长,用户会什么都看不到,但有了tbody分段显示和识别,避免了长时间空白后一下子显示出来的情况。

    var div = document.createElement("div");

    div.innerHTML = '<table></table>'

    alert(div.innerHTML) //=>ie678返回<table><tbody></tbody></table>,其它返回<table></table>

html.Serialize:判断浏览器是否完好支持用innerHTML转换一个符合html标签规则的字符串为一个元素节点,此过程jQuery称为序列化,但IE支持不够完好。包括scirpt link style mata在内的no-scope元素都转换失败。

style:这个命名很难看懂,不看代码不知道什么意思,真像是判定getAttribute是否返回style的用户预设值。IE678没有返回区分特性的特征,返回一个CSSStyleDeclaration对象。

hrefNormalized:判定getAttribute能否返回href的用户预设值。IE会补充给你完整的路径给你

opacity:判定浏览器是否支持opacity属性,ie678要使用滤镜

cssFloat: 判定float的样式在DOM的名字是那个,W3c为cssFloat,IE678为styleFloat

CheckOn: 在大多数浏览器中checkBox的value为on,chorme返回空字符串

optSelected: 判定是否正确取得动态添加option元素的seleted,ie6-10与老版的safari对动态添加option没有设置为true。解决办法,在访问selected属性前,先访问父节点的selectedIndex属性,再强制计算option的seleted.

<select id='optSelected'></select>
<script type="text/javascript">
  var select = document.getElementById('optSelected');
  var option = document.createElement('option');
  select.appendChild(option);
  alert(option.selected);
  select.selectedIndex;
  alert(option.selected)
</script>

optDisabled : 判定select元素的disable属性是否影响到子元素的disabled取值.在safari中,一旦select元素被disabled,它的子元素也disabled,导致一个值也取不到

checkClone:是指一个checkbox元素,如果设置了checked=true,且在多次克隆后,它的复制品能否保持为true。这个方法只有在safari4中返回false,其它的都true

inlineBlockNeedsLayout:判定是否使用hasLayout方法让dispaly:inline-block生效。这个方法只有ie678为true

getSetAttribute:判定是否区分特性属性,只有ie678为false

noCloneEvent:判定在克隆元素时是否克隆attachEvent绑定事件。只有旧版本的ie及其兼容模式返回false

enctype:判定浏览器是否支持encoding属性,ie67使用encoding属性来代替

boxModel:判定浏览器是否在content-box盒子渲染模式下

submitBubbles, changeBubbles, focusinBubble:判定浏览器是否支持这些事件,一直冒泡到document

shrinkWrapBlocks:判定元素是否会被子元素撑开。在IE678中,非替换元素在设置了大小与hasLayout的情况下,将将其父级元素撑大。

html5Clone:判定能否使用cloneNode克隆HTML5新标签 ,旧版本的IE不支持。需要用到outerHTML

deleteExpando:判定能否删除元素节点上的自定义元素,这用于jQuery缓存系统。旧版本的IE不支持,直接undefined

pixelPosition:判定getComputedStyle能否转换元素的top left bottom right元素的百分比值。这个在webkit系统会出现问题,需要用到 Dean Edwards神的hack

reliableMarginRight:判定getComputedStyle能否正确的取得元素的marginRiht.

clearCloneStyle :ie9 10 会出现奇怪的bug,当复制了一个元素的background-*样式的元素,对复制的元素进行清空时,会清空原来的样式。

随着浏览器疯狂更新版本,标准浏览器引发的各种bug已经超越IE,特征侦测不退反进,越来越重要了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
微信小程序实现底部弹出框
Nov 18 Javascript
简述AngularJS相关的一些编程思想
Jun 23 #Javascript
javascript框架设计之种子模块
Jun 23 #Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 #Javascript
javascript框架设计之框架分类及主要功能
Jun 23 #Javascript
js的flv视频播放器插件使用方法
Jun 23 #Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 #Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 #Javascript
You might like
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
PHP7 新增常量
2021/03/09 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
2015年技术工作总结范文
2015/04/20 职场文书
公积金贷款承诺书
2015/04/30 职场文书