javascript框架設計瀏覽器的嗅探與特徵偵測_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript框架設計瀏覽器的嗅探與特徵偵測_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

javascript框架設計

瀏覽器的嗅探現在已經不推薦了，但在某些場合還是需要的。例如一些統計腳本。在標準瀏覽器裡，提供了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 DOMNodeIn 這些就無能為力了這些就無能為力的這些開具。

這些事件中，有的非常有用，如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 &#63; '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 = ''

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

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