跨浏览器开发工作小结 - 军军小站|张军博客

　本篇小结是在2011年时候总结的，当时做一个产品的跨浏览器兼容工作，由于产品开发的时间比较早，最开始只能在IE下面(IE 8、IE 9还有点点问题)使用，做跨浏览器兼容工作的时候，主要是适配IE 6--IE 9、Safari、FireFox 、 Chrome，引入了jQuery框架进行改造后，大部分功能可以正常使用，现将总结分享一下。

1.eval(idName)

　　【问题描述】： IE 、 safari 、 Chrome 浏览器下都可以使用 eval(idName) 或 getElementById(idName) 来取得 id 为 idName 的 HTML 对象； firefox 下只能使用 getElementById(idName) 来取得 id 为 idName 的 HTML 对象 .

　　【兼容办法】：统一用 getElementById("idName") 来取得 id 为 idName 的 HTML 对象。

2.ActiveXObject

　　【问题描述】： IE 下支持用 var obj = new ActiveXObject() 的方式创建对象，但其它浏览器都会提示 ActiveXObject 对象未定义。

　　【兼容办法】：

　　(1) 在使用 new ActiveXObject() 之前先判断浏览器是否支持 ActiveXObject 对象，以创建 AJAX 对象为例：

      
        1
      
      
        if
      
      
        (window.ActiveXObject)

      
      
        2
      
      
        {

      
      
        3
      
      
        this
      
      .req=
      
        new
      
       ActiveXObject("Microsoft.XMLHTTP"
      
        );

      
      
        4
      
      
        }

      
      
        5
      
      
        else
      
      
        if
      
      
        (window.XMLHttpRequest)

      
      
        6
      
      
        {

      
      
        7
      
      
        this
      
      .req=
      
        new
      
      
         XMLHttpRequest();

      
      
        8
      
       }

　　(2) 使用 jQuery 封装的 ajax 方法来创建对象，以创建 AJAX 对象为例 (推荐) ：

      
         1
      
      
        var
      
       strResponse = ""
      
        ;

      
      
         2
      
       jQuery.ajax({ url: sAspFile, data: "<root>" + sSend + "</root>", processData: 
      
        false
      
      , async: 
      
        false
      
      , type: "POST"
      
        ,

      
      
         3
      
           error: 
      
        function
      
      
        (XMLHttpRequest, textStatus, errorThrown) 

      
      
         4
      
      
            {

      
      
         5
      
                   strResponse =
      
         textStatus;

      
      
         6
      
      
            },

      
      
         7
      
            success: 
      
        function
      
      
        (data, textStatus)

      
      
         8
      
      
             {

      
      
         9
      
                   strResponse =
      
         data;

      
      
        10
      
      
            } 

      
      
        11
      
       });

3.XML 操作

　　【问题描述】：通常装载 xml 文档使用 ActiveXObject 对象，但除非 IE 外，其它浏览器都不支持此方法。 XML 文档操作， IE 和其它浏览器也存在不同，通常取 XML 对象的 XML 文本的方法是 xml.documentElement.xml ，但 xml 属性只有 IE 支持，其它浏览器均不支持。查找节点是常用的方法有 selectNodes 和 selectSingleNode ，这两个方法也只有 IE 支持，其它浏览器需要自己扩展。

　　【兼容办法】

　　(1) 装载 XML 文档：用 $.ajax() ，参考 jquery 帮助文档

　　(2)xml 对象转字符串，如：

      
         1
      
      
        var
      
       stringtoxml = 
      
        function
      
      (str) { 
      
        //
      
      
        字符串转xml对象
      
      
         2
      
      
        var
      
       s = "<?xml version='1.0' encoding='utf-8' ?>" +
      
         str;

      
      
         3
      
      
        var
      
       objxml = 
      
        null
      
      
        ;

      
      
         4
      
      
        if
      
      
         (window.ActiveXObject) {

      
      
         5
      
               objxml = 
      
        new
      
       ActiveXObject("Microsoft.XMLDOM"
      
        );

      
      
         6
      
               objxml.async = 
      
        false
      
      
        ;

      
      
         7
      
      
                objxml.loadXML(s);

      
      
         8
      
      
            }

      
      
         9
      
      
        else
      
      
         {

      
      
        10
      
               objxml = (
      
        new
      
       DOMParser()).parseFromString(s, "text/xml"
      
        );

      
      
        11
      
      
            }

      
      
        12
      
      
        return
      
      
         objxml;

      
      
        13
      
      
        }

      
      
        14
      
      
        15
      
      
        var
      
       xmltostring = 
      
        function
      
      (dom) {  
      
        //
      
      
        xml对象转字符串
      
      
        16
      
      
        if
      
       (dom 
      
        instanceof
      
      
         jQuery) {

      
      
        17
      
               dom = dom[0
      
        ];

      
      
        18
      
      
            }

      
      
        19
      
      
        var
      
       str = 
      
        null
      
      
        ;

      
      
        20
      
      
        if
      
      
         (window.ActiveXObject) {

      
      
        21
      
               str =
      
         dom.xml;

      
      
        22
      
      
            }

      
      
        23
      
      
        else
      
      
         {

      
      
        24
      
               str = (
      
        new
      
      
         XMLSerializer()).serializeToString(dom);

      
      
        25
      
      
            }

      
      
        26
      
      
        return
      
      
         str;

      
      
        27
      
      
        }

      
      
        28
      
      
        29
      
      
        var
      
       oXMLO = stringtoxml("<root>"+ xml +"</root>"
      
        );

      
      
        30
      
      
        var
      
       root =
      
         oXMLO.documentElement;

      
      
        31
      
      
        var
      
       strXml = xmltostring(root).replace("<root>","");

　　(3) 字符串转 xml 对象，如：

      
        1
      
      
        var
      
       oXML = stringtoxml("<root>" + document.getElementById("hidTaskXml").value + "</root>");

　　(4) 查找结点：可以用 JQUERY 同的 find 方法来查找结点，如：

      
        1
      
      
        var
      
       item = $(oXML).find("record");

　　或者用原型扩展方法为 XML 对象添加 selectNodes 和 selectSingleNode 方法，扩展方法如下：

      
        if
      
      ( document.implementation.hasFeature("XPath", "3.0"
      
        ) ) 
{
    XMLDocument.prototype.selectNodes 
      
      =
      
        function
      
      
        (cXPathString, xNode) 
    {
        
      
      
        if
      
      ( !
      
        xNode ) 
        { 
            xNode 
      
      = 
      
        this
      
      
        ; 
        } 
        
      
      
        var
      
       oNSResolver = 
      
        this
      
      .createNSResolver(
      
        this
      
      
        .documentElement); 

        
      
      
        var
      
       aItems = 
      
        this
      
      
        .evaluate(cXPathString, xNode, oNSResolver,

        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
      
      
        null
      
      
        ) ;

        
      
      
        var
      
       aResult =
      
         []; 

        
      
      
        for
      
      ( 
      
        var
      
       i = 0; i < aItems.snapshotLength; i++
      
        )
        {     
            aResult[i] 
      
      =
      
         aItems.snapshotItem(i); 
        } 
    
        
      
      
        return
      
      
         aResult; 
     } 

    Element.prototype.selectNodes 
      
      = 
      
        function
      
      
        (cXPathString)
     {     
        
      
      
        if
      
      (
      
        this
      
      
        .ownerDocument.selectNodes)
        {          
            
      
      
        return
      
      
        this
      
      .ownerDocument.selectNodes(cXPathString, 
      
        this
      
      
        );     
        } 
        
      
      
        else
      
      
        
        {     
            
      
      
        throw
      
       "For XML Elements Only"
      
        ;    
        }  
     }

    XMLDocument.prototype.selectSingleNode 
      
      = 
      
        function
      
      
        (cXPathString, xNode) 
    {
        
      
      
        if
      
      ( !
      
        xNode ) 
        {  
           xNode 
      
      = 
      
        this
      
      
        ; 
        } 
        
      
      
        var
      
       xItems = 
      
        this
      
      
        .selectNodes(cXPathString, xNode);   
        
      
      
        if
      
      ( xItems.length > 0
      
         )
        {     
             
      
      
        return
      
       xItems[0
      
        ];   
        } 
        
      
      
        else
      
      
         
        {   
            
      
      
        return
      
      
        null
      
      
        ;   
        } 
    } 

    Element.prototype.selectSingleNode 
      
      = 
      
        function
      
      
        (cXPathString) 
    {    
        
      
      
        if
      
      (
      
        this
      
      
        .ownerDocument.selectSingleNode) 
        {       
            
      
      
        return
      
      
        this
      
      .ownerDocument.selectSingleNode(cXPathString, 
      
        this
      
      
        );   
        } 
        
      
      
        else
      
      
        
        {      
            
      
      
        throw
      
       "For XML Elements Only"
      
        ;
        }    
     }  
}

4.window.execScript()

　　【问题描述】：只有 IE 浏览器支持 execScript 方法，其它的都不支持。但所有浏览器都支持 window.eval() 方法。

　　【兼容办法】：用 window.eval() 方法代替 window.execScript() 。如

      
        1
      
      
        //
      
      
        window.execScript(“alert(123)”);
      
      
        2
      
      
        3
      
       window.eval(“alert(123)”);

5.window.createPopup()

　　【问题描述】：创建一个弹出窗口的方法， IE 支持此方法， Safari 、 FireFox 、 Chrome 都不支持，使用时会提示 createPopup 方法未定义。

　　【兼容办法】：可用如下方法为 window 对象添加 createPopup 方法。

      
        if
      
       (!
      
        window.createPopup) {   
    
      
      
        var
      
       __createPopup = 
      
        function
      
      
        () {   
        
      
      
        var
      
       SetElementStyles = 
      
        function
      
      
        ( element, styleDict ) {   
            
      
      
        var
      
       style =
      
         element.style ;   
            
      
      
        for
      
       ( 
      
        var
      
       styleName 
      
        in
      
       styleDict )style[ styleName ] =
      
         styleDict[ styleName ] ;    
        }   
        
      
      
        var
      
       eDiv = document.createElement( 'div'
      
         );    
        SetElementStyles( eDiv, { 
      
      'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden'
      
         } ) ;   
        eDiv.body 
      
      =
      
         eDiv ;   
        
      
      
        var
      
       opened = 
      
        false
      
      
         ;   
        
      
      
        var
      
       setOpened = 
      
        function
      
      
        ( b ) {   
            opened 
      
      =
      
         b;    
        }   

        
      
      
        var
      
       getOpened = 
      
        function
      
      
        () {   
            
      
      
        return
      
      
         opened ;    
        }   

        
      
      
        var
      
       getCoordinates = 
      
        function
      
      
        ( oElement ) {   
            
      
      
        var
      
       coordinates = {x:0,y:0
      
        } ;    
            
      
      
        while
      
      
        ( oElement ) {   
                coordinates.x 
      
      +=
      
         oElement.offsetLeft ;   
                coordinates.y 
      
      +=
      
         oElement.offsetTop ;   
                oElement 
      
      =
      
         oElement.offsetParent ;   
            }   
            
      
      
        return
      
      
         coordinates ;   
        }   
        
      
      
        return
      
      
         {
            htmlTxt : 
      
      ''
      
        , 
      document : eDiv, 
      isOpen : getOpened(), 
      isShow : 
      
      
        false
      
      
        , 
      hide : 
      
      
        function
      
      
        () { 
       SetElementStyles( eDiv, { 
      
      'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none'
      
         } ) ; 
       eDiv.innerHTML 
      
      = ''
      
         ; 
       
      
      
        this
      
      .isShow = 
      
        false
      
      
         ; 
      }, 
      show : 
      
      
        function
      
      
        ( iX, iY, iWidth, iHeight, oElement ) { 
       
      
      
        if
      
       (!
      
        getOpened()) { 
        document.body.appendChild( eDiv ) ; setOpened( 
      
      
        true
      
      
         ) ; 
       } ; 
       
      
      
        this
      
      .htmlTxt =
      
         eDiv.innerHTML ; 
       
      
      
        if
      
       (
      
        this
      
      
        .isShow) { 
           
      
      
        this
      
      
        .hide() ; 
       } ; 
       eDiv.innerHTML 
      
      = 
      
        this
      
      
        .htmlTxt ; 
       
      
      
        var
      
       coordinates =
      
         getCoordinates ( oElement ) ; 
       eDiv.style.top 
      
      = ( iX + coordinates.x ) + 'px'
      
         ; 
       eDiv.style.left 
      
      = ( iY + coordinates.y ) + 'px'
      
         ; 
       eDiv.style.width 
      
      = iWidth + 'px'
      
         ; 
       eDiv.style.height 
      
      = iHeight + 'px'
      
         ; 
       eDiv.style.display 
      
      = 'block'
      
         ; 
       
      
      
        this
      
      .isShow = 
      
        true
      
      
         ; 
      } 
  }   
    }   
    window.createPopup 
      
      = 
      
        function
      
      
        () {   
        
      
      
        return
      
      
         __createPopup();    
    }   
}

6.getYear() 方法

　　【问题描述】：如下代码：

      
        1
      
      
        var
      
       year= 
      
        new
      
      
         Date().getYear();

      
      
        2
      
      
        3
      
       document.write(year);

　　在 IE 中得到的日期是 "2011" ，在 Firefox 中看到的日期是 "111" ，主要是因为在 Firefox 里面 getYear 返回的是 " 当前年份 -1900" 的值。

　　【兼容办法】：解决办法是加上对年份的判断，如 :

      
        1
      
      
        var
      
       year= 
      
        new
      
      
         Date().getYear();

      
      
        2
      
       year = (year<1900?(1900+
      
        year):year);

      
      
        3
      
       document.write(year);

　　也可以通过 getFullYear getUTCFullYear 去调用 :

      
        1
      
      
        var
      
       year = 
      
        new
      
      
         Date().getFullYear();

      
      
        2
      
      
        3
      
       document.write(year);

7.document.all

　　【问题描述】： document.all 在 IE 、 Safari 下都可以使用， firefox 、 Chrome 下不能使用

　　【兼容办法】：所有以 document.all.* 方法获取对象的地方都改为 document.getElementById 或 document.getElementsByName 或 document.getElementsByTagName 。

8. 变量名与对象 ID 相同的问题

　　【问题描述】：IE 下 ,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用，如下面的写法：

      objid.value = “123”;
      
        //
      
      
        objid为控件ID

　　其它浏览器下则不能这样写。原因是其它浏览器下 , 可以使用与 HTML 对象 ID 相同的变量名， IE 下则不能。

　　【兼容办法】：使用 document.getElementById(idName) 等通用方法先获取对象，再操行其它操作。如 :

      document.getElementById(objid).value = “123”; 
      
        //
      
      
        objid为控件ID

　　注：最好不要取 HTML 对象 ID 相同的变量名 , 以减少错误 ; 在声明变量时 , 一律加上 var, 以避免歧义。

9.select 元素的 add 方法

　　【问题描述】：在 IE ， Safari ， Chrome 下， select 控件添加项时使用如下的方法：

      document.getElementById(“select1”).add(
      
        new
      
       Options(“aa”,”aa”));

　　但在 FireFox 下这样操作会报错。

　　【兼容办法】：统一使用兼容方法，加 options 属性，如下：

      document.getElementById(“select1”).options.add(
      
        new
      
       Options(“aa”,”aa”));

10.html 元素的自定义属性

　　【问题描述】： IE 下元素属性访问方法如 document.getElementById(id). 属性名，而且对于自定义属性和非自定义属性均有效。但在其它浏览器下该方法只适应于元素的公共属性，自定义属性则取不到。

　　【兼容办法】：用 jQuery 的方法来取，如 $(“#id”).attr(“ 属性 ”) 或用 document.getElementById(id).getAttribute(“ 属性 ”)，两种方法都可以适用所有浏览器。

11.html 元素 innerText 属性

　　【问题描述】：取元素文本的属性 innerText 在 IE 中能正常工作，但此属性不是 DHTML 标准，其它浏览器不支持，其它浏览器中使用 textContent 属性获取。

　　【兼容办法】：

　　(1) 通用方法是用 jQuery 方法 $(“#id”).text() ，如：

      
        //
      
      
        document.getElementById(id).innerText;
      
      
        
$(“#id”).text();

　　(2) 取值前判断浏览器，根据具体情况取值，如：

      
        var
      
       obj =
      
         document.getElementById(id);


      
      
        var
      
       str = (obj.innerText)?obj.innerText:obj.textContent;

　　(3) 也可以通过原型扩展方法来为元素添加 innerText ，扩展方法如下：

      
        if
      
      (
      
        typeof
      
      (HTMLElement)!="undefined" && !
      
        window.opera) 
{ 
    
      
      
        var
      
       pro =
      
         window.HTMLElement.prototype;     

    pro.__defineGetter__(
      
      "innerText",
      
        function
      
      
         (){ 
        
      
      
        var
      
       anyString = ""
      
        ; 
        
      
      
        var
      
       childS = 
      
        this
      
      
        .childNodes; 
        
      
      
        for
      
      (
      
        var
      
       i=0; i<childS.length; i++
      
        ) 
        { 
            
      
      
        if
      
      (childS[i].nodeType==1
      
        )
            { 
                anyString 
      
      += childS[i].tagName=="BR" ? '\n'
      
         : childS[i].innerText; 
            }
            
      
      
        else
      
      
        if
      
      (childS[i].nodeType==3
      
        ) 
            {
                anyString 
      
      +=
      
         childS[i].nodeValue; 
            }
        } 
        
      
      
        return
      
      
         anyString; 
     }); 

     pro.__defineSetter__(
      
      "innerText",
      
        function
      
      
        (sText){
        
      
      
        this
      
      .textContent=
      
        sText; 
     });   
}

12.html 元素 innerHTML 、 outerHTML 属性

　　【问题描述】： innerHTML 是所有浏览器都支持的属性。 outerHTML 属性不是 DHTML 标准， IE 外的其它浏览器不支持。

　　【兼容办法】：在非 IE 浏览器下必须使用扩展方法才能获取，扩展方法如下：

      
        if
      
      (
      
        typeof
      
      (HTMLElement)!="undefined" && !
      
        window.opera) 
{ 
     
      
      
        var
      
       pro =
      
         window.HTMLElement.prototype;     
     pro.__defineGetter__(
      
      "outerHTML", 
      
        function
      
      
        (){     
          
      
      
        var
      
       str = "<" + 
      
        this
      
      
        .tagName;     
          
      
      
        var
      
       a = 
      
        this
      
      
        .attributes;     
          
      
      
        for
      
      (
      
        var
      
       i = 0, len = a.length; i < len; i++
      
        )
          {     
               
      
      
        if
      
      
        (a[i].specified)
               {     
                    str 
      
      += " " + a[i].name + '="' + a[i].value + '"'
      
        ;     
               }     
          }     
          
      
      
        if
      
      (!
      
        this
      
      
        .canHaveChildren)
          {     
               
      
      
        return
      
       str + " />"
      
        ;     
          }     
          
      
      
        return
      
       str + ">" + 
      
        this
      
      .innerHTML + "</" + 
      
        this
      
      .tagName + ">"
      
        ;     
     });     

      pro.__defineSetter__(
      
      "outerHTML", 
      
        function
      
      
        (s){     
          
      
      
        var
      
       r = 
      
        this
      
      
        .ownerDocument.createRange();     
          r.setStartBefore(
      
      
        this
      
      
        );     
          
      
      
        var
      
       df =
      
         r.createContextualFragment(s);     
          
      
      
        this
      
      .parentNode.replaceChild(df, 
      
        this
      
      
        );     
          
      
      
        return
      
      
         s;     
     });     
}

13.html 元素 parentElement 属性

　　【问题描述】： parentElement 是取元素父结点的属性，此属性只有 IE 支持，其它浏览器均不支持。

　　【兼容办法】：用 parentNode 属性来获取父结点，如：

      
        //
      
      
        document.getElementById(id).parentElement；
      
      
        
document.getElementById(id).parentNode；

14. 集合类对象问题

　　【问题描述】： IE 下对于集合类对象，如 forms,frames 等 , 可以使用 () 或 [] 获取集合类对象， Safari ， Chrome 也都支持，如

document.forms(“formid”) 或 document.forms[“formid”]。但 Firefox 下 , 只能使用 [] 获取集合类对象。

　　【兼容办法】：统一使用 [] 获取集合类对象，如：

      document.forms[0
      
        ];

document.forms[“formid”];

　　【注】：所有以数组方式存储的对象都在访问子成员时，都必须以 [] 方式索引得到，如常见的 XML 文档遍历，也需要改，如下：

      
        //
      
      
         xmldoc.documentElement.childNodes(1) 
      
      
        
xmldoc.documentElement.childNodes[
      
      1]

15.frame 操作

　　【问题描述】: 在 IE、 Safari 、 Chrome 下，用 window 对象访问 frame 对象时，可以用 id 和 name 属性来获取，如

      
        window.frameId;
window.frameName;

　　但在 firefox 下，必须使用 frame 对象的 name 属性才能获取到。

　　【兼容办法】：

　　(1) 访问 frame 对象：统一使用 window.document.getElementById(frameId) 来访问这个 frame 对象。

　　(2) 切换 frame 内容：统一使用 window.document.getElementById(testFrame).src=xxx.htm 切换。

　　如果需要将 frame 中的参数传回父窗口，可以在 frame 中使用 parent 来访问父窗口。例如： parent.document.form1.filename.value=Aqing;

　　(3)iframe 页中的对象 : $("#frameid").contents().find("#html 控件 id")

　　(4)iframe 页中的 iframe: $("#frameid").contents().find("#frameid1").contents();

　　(5)iframe 中的方法或变量： $("#frameid")[0] .contentWindow.SaveFile("false", strRet, a);

16.insertAdjacentHTML 和 insertAdjacentText

　　【问题描述】： insertAdjacentHTML 方法是比 innerHTML 、 outerHTML 属性更灵活的插入 HTML 代码的方法。它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的 HTML 代码。不是 W3C 标准的 DOM 方法， W3C 近期在 HTML5 草案中扩展了这个方法。

　　insertAdjacentText 是比 innerText 、 outerText 属性更灵活的插入文本的方法。它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的文本。不是 W3C 标准的 DOM 方法，至今为止 W3C 的 HTML5 还未涉及此方法。

　　insertAdjacentHTML 和 insertAdjacentText 可以 IE 、 Safari 、 Chrome 上执行，只有 FireFox 不支持，

　　【兼容办法】：可用以下方法进行扩展：

      
        if
      
       (
      
        typeof
      
      (HTMLElement) != "undefined"
      
        ) 
{
    HTMLElement.prototype.insertAdjacentElement 
      
      = 
      
        function
      
      
        (where, parsedNode) 
    {
        
      
      
        switch
      
      
         (where) 
        {
            
      
      
        case
      
       "beforeBegin"
      
        :
                
      
      
        this
      
      .parentNode.insertBefore(parsedNode, 
      
        this
      
      
        );
                
      
      
        break
      
      
        ;
            
      
      
        case
      
       "afterBegin"
      
        :
                
      
      
        this
      
      .insertBefore(parsedNode, 
      
        this
      
      
        .firstChild);
                
      
      
        break
      
      
        ;
            
      
      
        case
      
       "beforeEnd"
      
        :
                
      
      
        this
      
      
        .appendChild(parsedNode);
                
      
      
        break
      
      
        ;
            
      
      
        case
      
       "afterEnd"
      
        :
                
      
      
        if
      
       (
      
        this
      
      
        .nextSibling)
                    
      
      
        this
      
      .parentNode.insertBefore(parsedNode, 
      
        this
      
      
        .nextSibling);
                
      
      
        else
      
      
        this
      
      
        .parentNode.appendChild(parsedNode);
                
      
      
        break
      
      
        ;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML 
      
      = 
      
        function
      
      
        (where, htmlStr) 
    {
        
      
      
        var
      
       r = 
      
        this
      
      
        .ownerDocument.createRange();
        r.setStartBefore(
      
      
        this
      
      
        );
        
      
      
        var
      
       parsedHTML =
      
         r.createContextualFragment(htmlStr);
        
      
      
        this
      
      
        .insertAdjacentElement(where, parsedHTML);
    }

    HTMLElement.prototype.insertAdjacentText 
      
      = 
      
        function
      
      
        (where, txtStr) 
    {
        
      
      
        var
      
       parsedText =
      
         document.createTextNode(txtStr);
        
      
      
        this
      
      
        .insertAdjacentElement(where, parsedText);
    }
}

17.Html 元素的 children 属性

　　【问题描述】： children 是取 HTML 元素子结点的属性，只有 IE 下支持，其它浏览器下用 childNodes 。

　　【兼容办法】：统一改为用 childNodes 属性取子结点。或用以下方法扩展 HTML 元素的属性：

      
        if
      
       (
      
        typeof
      
      (HTMLElement) != "undefined"
      
        ) 
{
    HTMLElement.prototype.__defineGetter__(
      
      "children",
      
        function
      
      
        (){ 
         
      
      
        var
      
       returnValue = 
      
        new
      
      
         Object(); 
         
      
      
        var
      
       number = 0
      
        ; 
         
      
      
        for
      
      (
      
        var
      
       i=0; i<
      
        this
      
      .childNodes.length; i++
      
        )
         { 
             
      
      
        if
      
      (
      
        this
      
      .childNodes[i].nodeType == 1
      
        )
             { 
                 returnValue[number] 
      
      = 
      
        this
      
      
        .childNodes[i]; 
                 number
      
      ++
      
        ; 
             } 
         } 
         returnValue.length 
      
      =
      
         number; 
         
      
      
        return
      
      
         returnValue; 
    })
}

18.insertRow \ inserCell

　　【问题描述】： insertRow 和 insertCell 是在表格中插入行或插入列的方法，在 IE 中使用方法如下

      
        var
      
       nowTB = document.getElementById("tb1"
      
        );
nowTR 
      
      =
      
         nowTB.insertRow();
nowTD 
      
      = nowTR.insertCell();

　　Safari 、 Chrome 下也可以正常执行，但插入行的位置不一样 IE 下默认在表尾插入行， Safari 、 Chrome 默认在表头插入行；但在 FireFox 下调用会报错。

　　【兼容办法】：下面的方法可以在所有浏览器上调用，而且插入行的位置都是表尾，不同之处就是执行前传递一个默认值。推荐使用。

      
        var
      
       nowTB = document.getElementById("tb1"
      
        );

nowTR 
      
      = nowTB.insertRow(-1
      
        );

nowTD 
      
      = nowTR.insertCell(-1);

19.document.createElement

　　【问题描述】： IE 有 3 种方式都可以创建一个元素 :

      1 document.createElement("<input type=text>"
      
        )


      
      2 document.createElement("<input>"
      
        )


      
      3 document.createElement("input")

　　Safari 、 FireFox 、 Chrome 只支持一种方式 :

      document.createElement("input"
      
        );

document.setAttribute(name,value);

　　【兼容办法】：统一使用所有浏览器都支持的方法，如下：

      document.createElement("input"
      
        );

document.setAttribute(name,value);

20. 浏览器处理 childNodes 的异同

　　【问题描述】：如下 HTML 代码：

      <ul id="main">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<input type=button value="click me!" onclick=

"alert(document.getElementById('main').childNodes.length)">

　　分别用 IE 和其它浏览器运行， IE 的结果是 3 ，而其它则是 7 。

　　IE 是将一个完整标签作为一个节点，而 Safari 、 FireFox 、 Chrome 除了上述的的情况外，也把一个标签的结束符 “>” 到下一个标签的起始符 “<” 之间的内容（除注释外，包括任何的文字、空格、回车、制表符）也算是一个节点了，而且这种节点也有它们自己独特的属性和值 nodeName="#text" 。

　　【兼容办法】：在实际运用中， Safari 、 FireFox 、 Chrome 在遍历子节点时，在 for 循环里加上

　　if(childNode.nodeName=="#text") continue; 或者 nodeType == 1 这样，便跳过不需要的操作，使程序运行的更有效率。也可以用 node.getElementsByTagName() 回避。

21.document.getElementsByName

　　【问题描述】：在元素只有 name 属性，没有 id 属性的情况下，在 IE 中获取不到 DIV 元素，其它浏览器可以获取。当前 name 和 id 属性都存在时，所有浏览器都可以获取到 DIV 元素。

　　【兼容办法】：尽量用 ID 来获取。

22.tr 操作

　　【问题描述】： IE 下 table 中无论是用 innerHTML 还是 appendChild 插入 <tr> 都没有效果，因为在 IE 浏览器下 tr 是只读的。而其他浏览器下可以这样操作。

　　【兼容办法】：将 <tr> 加到 table 的 <tbody> 元素中，如下面所示：

      
        var
      
       row = document.createElement("tr"
      
        );


      
      
        var
      
       cell = document.createElement("td"
      
        );


      
      
        var
      
       cell_text = document.createTextNode("插入的内容"
      
        );

cell.appendChild(cell_text);

row.appendChild(cell);

document.getElementsByTagName(
      
      "tbody")[0].appendChild(row);

23. 移除节点 removeNode()

　　【问题描述】： appendNode 在 IE 和其它浏览器下都能正常使用，但是 removeNode 只能在 IE 下用。 removeNode 方法的功能是删除一个节点，语法为 node.removeNode （ false ）或者 node.removeNode （ true ），返回值是被删除的节点。

　　removeNode （ false ）表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。

　　removeNode （ true ）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。

　　【兼容办法】：兼容 IE 和其它浏览器的方法是 removeChild ，先回到父节点，在从父节点上移除要移除的节点。

      
        //
      
      
         为了在IE和其它浏览器下都能正常使用，取上一层的父结点，然后remove。
      
      
node.parentNode.removeChild(node);

24.expression

　　【问题描述】： IE 下样式支持计算表达式 expression ，但其它浏览器不支持，而且 IE 以后高版本也可能不再支持这种样式，所以不允许使用。下面是通常使用的情况：

      <div id=
      
        ”content”
 style
      
      =’height:expression(document.body.offsetHeight-80)”></div>

　　【兼容办法】：去掉样式设置，将其写到函数中，分别在页面加载完毕和页面尺寸发生变化时执行。如下：

      $(
      
        function
      
      
        (){
  $(“#content”).height($(document.body).height()
      
      -80
      
        );
})

$(window).resize(
      
      
        function
      
      
        (){
  $(“#content”).height($(document.body).height()
      
      -80
      
        );
});

25.Cursor

　　【问题描述】： Cursor 的 hand 属性只有 IE 支持，其它浏览器没有效果，如：

      <div style=”cursor:hand”></div>

　　【兼容办法】：统一用 pointer 值，如：

      <div style=”cursor: pointer”></div>

26.CSS 透明问题

　　【问题描述】： IE 支持但其它浏览器不支持的透明样式如下：

      <div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue">ddddd</div>

　　其它浏览器支持但 IE 不支持的透明样式如下：

      <div style="opacity:0.2;width:200px;height:200px;background-color:Blue">ddddd</div>

　　【兼容办法】：利用 ”!important” 来设置元素的样式。 Safari ， FireFox ， Chrome 对于 ”!important” 会自动优先解析，然而 IE 则会忽略。如下

      <div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;background-color:Blue;!important; opacity:0.2">ddddd</div>

27.pixelHeight \ pixelWidth

　　【问题描述】： pixelHeight \ pixelWidth 是元素的高度和宽度样式，通常获取方法是：

      
        obj.style.pixelWidth;

obj.style.pixelHeight;

　　IE ， Safari ， Chrome 都支持此样式，返回的值是整数， FireFox 不支持

　　【兼容办法】：所有浏览器都支持 obj.style.height ，但返回的值是带单位的，如“ 100px ”。可以用如下方法来获取：

      parseInt(obj.style.height)

28.noWrap

　　【问题描述】： nowrap 属性是被废弃的属性。

　　【兼容办法】：使用 CSS 规则 white-space:nowrap 代替这个属性。

29.CSS 的 float 属性

　　【问题描述】： Javascript 访问一个给定 CSS 值的最基本句法是： object.style.property ，但部分 CSS 属性跟 Javascript 中的保留字命名相同，如 "float" ， "for" ， "class" 等，不同浏览器写法不同。

　　在 IE 中这样写：

      document.getElementById("header").style.styleFloat = "left";

　　在其它浏览器中这样写：

      document.getElementById("header").style.cssFloat = "left";

　　【兼容办法】：兼容方法是在写之前加一个判断，判断浏览器是否是 IE ：

      
        if
      
      
        (jQuery.browser.msie){
    document.getElementById(
      
      "header").style.styleFloat = "left"
      
        ;
}

      
      
        else
      
      
        {
    document.getElementById(
      
      "header").style.cssFloat = "left"
      
        ;
}

30. 访问 label 标签中的 for

　　【问题描述】： for 属性规定 label 与哪个表单元素绑定。在 IE 中这样写：

      
        var
      
       myObject = document.getElementById("myLabel"
      
        );


      
      
        var
      
       myAttribute = myObject.getAttribute("htmlFor");

　　在 Firefox 中这样写：

      
        var
      
       myObject = document.getElementById("myLabel"
      
        );


      
      
        var
      
       myAttribute = myObject.getAttribute("for");

　　【兼容办法】：判断浏览器是否是 IE ：

      
        var
      
       myObject = document.getElementById("myLabel"
      
        );

      
      
        if
      
      
        (jQuery.browser.msie){
    
      
      
        var
      
       myAttribute = myObject.getAttribute("htmlFor"
      
        );
}

      
      
        else
      
      
        {
    
      
      
        var
      
       myAttribute = myObject.getAttribute("for"
      
        );
}

31. 访问和设置 class 属性

　　【问题描述】：同样由于 class 是 Javascript 保留字的原因，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

　　IE8.0 之前的所有 IE 版本的写法：

      
        var
      
       myObject = document.getElementById("header"
      
        );


      
      
        var
      
       myAttribute = myObject.getAttribute("className");

　　适用于 IE8.0 以及 firefox 的写法：

      
        var
      
       myObject = document.getElementById("header"
      
        );


      
      
        var
      
       myAttribute = myObject.getAttribute("class");

　　另外，在使用 setAttribute() 设置 Class 属性的时候，两种浏览器也存在同样的差异。

　　setAttribute("className",value); 这种写法适用于 IE8.0 之前的所有 IE 版本，注意： IE8.0 也不支持 "className" 属性了。 setAttribute("class",value); 适用于 IE8.0 以及 firefox 。

　　【兼容办法】：

　　1.两种都写上：

      
        1
      
      
        //
      
      
        设置header的class为classValue
      
      
        2
      
      
        var
      
       myObject = document.getElementById("header"
      
        );

      
      
        3
      
      
        4
      
       myObject.setAttribute("class","classValue"
      
        );

      
      
        5
      
      
        6
      
       myObject.setAttribute("className","classValue");

　　2. IE 和 FF 都支持 object.className ，所以可以这样写：

      
        var
      
       myObject = document.getElementById("header"
      
        );

myObject.className
      
      ="classValue";
      
        //
      
      
        设置header的class为classValue

　　3.先判断浏览器类型，再根据浏览器类型采用对应的写法。

32. 对象宽高赋值问题

　　【问题描述】：非 IE 浏览器中中类似 obj.style.height = imgObj.height 的语句无效 , 必须加上 ’px’ 。

　　【兼容办法】：给元素高度宽度附值是，统一都加上 ’px’ ，如：

      obj.style.height = imgObj.height + ‘px’;

33.鼠标位置

　　【问题描述】： IE 下， even 对象有 x 、 y 属性，但是没有 pageX 、 pageY 属性； Firefox 下， even 对象有 pageX 、 pageY 属性，但是没有 x 、 y 属性； Safari 、 Chrome中x 、 y 属性和 pageX 、 pageY 都有。

　　【兼容办法】：使用 mX = event.x ? event.x : event.pageX; 来代替。复杂点还要考虑绝对位置。

      
        function
      
      
         getAbsPoint(e){
    
      
      
        var
      
       x = e.offsetLeft, y =
      
         e.offsetTop;
    
      
      
        while
      
       (e =
      
         e.offsetParent) {
        x 
      
      +=
      
         e.offsetLeft;
        y 
      
      +=
      
         e.offsetTop;
    }
    alert(
      
      "x:" + x + "," + "y:" +
      
         y);
}

34.event.srcElement

　　【问题描述】： IE 下， event 对象有 srcElement 属性，但是没有 target 属性；其它浏览器下， even 对象有 target 属性，但是没有 srcElement 属性。

　　【兼容办法】：

      
        var
      
       obj = event.srcElement?event.srcElement:event.target;

35. 关于 <input type="file">

　　(1) 在 safari 浏览器下的此控件没有文本框，只有一个“选取文件”的按钮，所有也没有 onblur 事件，如果在 <input type="file" onblur="alert(0);"> 中用到了需要做特殊处理。

　　(2) 在 FF 浏览器下用 <input type="file" name="file"> 上传文件后取 file.value 时只能去掉文件名而没有文件路径，不能实现预览的效果，可以用 document.getElementById("pic").files[0].getAsDataURL(); 取到加密后的路径，此路径只有在 FF 下才可以解析。

　　(3) 在 safari 浏览器下用 <input type="file" name="file"> 上传文件后取 file.value 时只能去掉文件名而没有文件路径，不能实现预览的效果。建议使用上传后的路径预览。

36.jquery对象是否为空

　　jquery 对象是否为空判断，用 length 判断一下

      $("#hidTitle").length>0

IOS设计模式浅析

循自然之道，抚浮躁之心

跨浏览器开发工作小结

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义