叠石桥网站建设,成都网络公司报价,外贸询盘网站,重庆市建设企业诚信分查询网站本篇小结是在2011年时候总结的#xff0c;当时做一个产品的跨浏览器兼容工作#xff0c;由于产品开发的时间比较早#xff0c;最开始只能在IE下面(IE 8、IE 9还有点点问题)使用#xff0c;做跨浏览器兼容工作的时候#xff0c;主要是适配IE 6--IE 9、Safari、FireFox、Chr…本篇小结是在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.reqnew ActiveXObject(Microsoft.XMLHTTP);
4 }
5 else if(window.XMLHttpRequest)
6 {
7 this.reqnew 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 version1.0 encodingutf-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 (year1900?(1900year):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方法 【问题描述】在IESafariChrome下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 i0; ichildS.length; i) { if(childS[i].nodeType1){ anyString childS[i].tagNameBR ? \n : childS[i].innerText; }else if(childS[i].nodeType3) {anyString childS[i].nodeValue; }} return anyString; }); pro.__defineSetter__(innerText,function(sText){this.textContentsText; });
} 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).parentElementdocument.getElementById(id).parentNode 14.集合类对象问题 【问题描述】IE下对于集合类对象如forms,frames等,可以使用()或[]获取集合类对象SafariChrome也都支持如 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).srcxxx.htm切换。 如果需要将frame中的参数传回父窗口可以在frame中使用parent来访问父窗口。例如parent.document.form1.filename.valueAqing; (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);elsethis.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 i0; ithis.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 typetext)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 idmainli1/lili2/lili3/li/ulinput typebutton valueclick me! οnclickalert(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.removeNodefalse或者node.removeNodetrue返回值是被删除的节点。 removeNodefalse表示仅仅删除指定节点然后这个节点的原孩子节点提升为原双亲节点的孩子节点。 removeNodetrue表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点不再具有有孩子节点和双亲节点。 【兼容办法】兼容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 stylefilter:progid:DXImageTransform.Microsoft.Alpha(style0,opacity20);width:200px;height:200px;background-color:Blueddddd/div 其它浏览器支持但IE不支持的透明样式如下 div styleopacity:0.2;width:200px;height:200px;background-color:Blueddddd/div 【兼容办法】利用”!important”来设置元素的样式。SafariFireFoxChrome对于”!important”会自动优先解析然而IE则会忽略。如下 div stylefilter:progid:DXImageTransform.Microsoft.Alpha(style0,opacity20);width:200px;height:200px;background-color:Blue;!important; opacity:0.2ddddd/div 27.pixelHeight\pixelWidth 【问题描述】pixelHeight\pixelWidth是元素的高度和宽度样式通常获取方法是 obj.style.pixelWidth;obj.style.pixelHeight; IESafariChrome都支持此样式返回的值是整数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中的保留字命名相同如floatforclass等不同浏览器写法不同。 在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.classNameclassValue;//设置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 typefile (1) 在safari浏览器下的此控件没有文本框只有一个“选取文件”的按钮所有也没有onblur事件如果在input typefile οnbluralert(0);中用到了需要做特殊处理。 (2) 在FF浏览器下用input typefile namefile 上传文件后取file.value时只能去掉文件名而没有文件路径不能实现预览的效果可以用document.getElementById(pic).files[0].getAsDataURL();取到加密后的路径此路径只有在FF下才可以解析。 (3) 在safari浏览器下用input typefile namefile 上传文件后取file.value时只能去掉文件名而没有文件路径不能实现预览的效果。建议使用上传后的路径预览。 36.jquery对象是否为空 jquery对象是否为空判断用length判断一下 $(#hidTitle).length0 转载于:https://www.cnblogs.com/hubing/p/3479785.html
