打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
跨浏览器开发工作小结
 本篇小结是在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.getElementByIddocument.getElementsByNamedocument.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.insertAdjacentHTMLinsertAdjacentText

  【问题描述】: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"。

  【兼容办法】:在实际运用中,SafariFireFoxChrome在遍历子节点时,在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:(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.CSSfloat属性

  【问题描述】: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为classValue2 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设计模式浅析

 

循自然之道,抚浮躁之心
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
BX9028: 各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异
开发跨浏览器JavaScript---《Ajax基础教程》笔记 - java - CSDN...
兼容性处理——js浏览器兼容问题处理方式
Ajax-------IE和FIREFOX 脚本的一些区别
js CSS的 float class宽高赋值不兼容处理方法(ie7,ie8,firefo...
BT9016: 只有 IE 和 Opera 支持 document.frames
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服