谷歌浏览器兼容性问题总结
提示：在做兼容性之前,首先要知道HTML页面的加载顺序,否则页面初始化的时候很容易出错
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对象为例：
if(window.ActiveXObject) { this.req=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { this.req=new XMLHttpRequest(); }
(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:(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;ddddd</div>
其它浏览器支持但IE不支持的透明样式如下：
<div style="opacity:0.2;width:200px;height:200px;ddddd</div>
【兼容办法】：利用”!important”来设置元素的样式。Safari，FireFox，Chrome对于”!important”会自动优先解析，然而IE则会忽略。如下
<div style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);width:200px;height:200px;!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
37.showModalDialog兼容处理
//如果showModalDialog为为空就给它注册一个window.open事件，juti win.open属性可百度,有些属性谷歌不支持
if (!window.showModalDialog) {
window.showModalDialog = function (url) {
return window.open(url, '', ' left=500,width = 355, height = 226 ;'+_winParam);
};
}
return win.showModalDialog(url, window, 'dialogtop=' + winobj.top + 'px;dialogleft=' + winobj.left + 'px;dialogWidth=' + winobj.width + 'px;dialogHeight='
+ winobj.height + 'px;' + _winParam);
38. table.rows[i].cells[6].style.display is not find
// rows(1) 谷歌报错
正确：
for (var i = 0; i < table.rows.length; i++) { table.rows[i].cells[6].style.display = isdisplay== "Y" ? "block" : "none";; }
错误：
table.rows(i).cells(6).style.display = isdisplay== "Y" ? "block" : "none";;
39.window.frames['子框架ID'].location is not find
//谷歌获取Frames元素失败，谷歌设置frames的location.href失败
正确：document.getElementById("frmCost").src = url; 谷歌IE都可以 错误：window.frames('frmCost').location = url; ie可以
window=当前整个框的一个全局对象
documnet=当前整个html文档 可访问里面的所有属性
window.loction=一个可读字段
document.loction=标识这个对象
2020年5月11日补充：
1：需要考虑到HTML页面的初始化与JS方法初始化是否顺序冲突, 20200513补充:js代码放在这里面执行 document.ready和window.onload
2：Document.getElementByID("").src 注意有些ifram页面的坑写的是Name，需要自己加ID上去
3:window.parent.frames 改为 parent.document.getElmentByID
40.谷歌获取HTML表单里面的自定义元素失败
var types = $(objs[i]).attr("自定义元素名称").split(",");$()使用jquery选择器来选择对象 //var types = obj.自定义的元素.split(","); IE正常,谷歌会出现underfind
41.document.createElement is not find
谷歌,iE都兼容
第一种：var $span = $('<span onmouseover="this.setCapture()" onmouseout="this.releaseCapture()" onfocus="this.blur()" onbeforeactivate="return false"></span>');//document.createElement obj.insertAdjacentElement("beforeBegin", $span[0]); $span[0].appendChild(obj);
第二种：var option = ("<option value='值'" >" +"值"+ "</option>");
$(sel).append(option);
只有IE兼容
错误 //var span = document.createElement('<span onmouseover="this.setCapture()" onmouseout="this.releaseCapture()" onfocus="this.blur()" onbeforeactivate="return false"></span>'); //obj.insertAdjacentElement("beforeBegin", span); //span.appendChild(obj);
42.谷歌浏览器获取表格里面的<a>标签文本会存在换行的情况 $(table).find("td:eq(1)").text()
正确：$.trim((table).find("td:eq(1)").text())
可能存在问题：$(table).find("td:eq(1)").text()
<a> <%# DataBinder.Eval("value")%> </a>
1:如上IE,获取$(row).find("td:eq(1)").text() <a>标签的文本 是正常的
2:在谷歌获取到的是换行的操作,会加很多空格 当插入到数据库的时候将会报文本超长
43. 页面table表单 row行： insertRow,insertCell,innerHTML问题
正确：谷歌IE兼容
获取表的行数：table.row[0] var row = table.insertRow(); var cell = row.insertCell(0); cell.innerHTML = row.cells[0].innerHTML;
IE兼容 //table.row(0) //var row = table.insertRow(); //var cell = row.insertCell[0]; //cell.innerHTML = oldRow.cells(0).innerHTML;
44.在谷歌中,<a>标签跳转的页面,是无法使用windos.close关闭的 只有用js打开的页面才能使用js关闭
45.IE下的函数window.showModalDialog和window.dialogArguments在谷歌不兼容 2020年5月15日 发工资的时候补充此条数据
业务:父页面有一个Table,然后点击打开一个模态对话框 ,然后模态对话框插入table数据给父页面的Table框架 父页面.js: //html页面包含dom树 有一个tableID window.showModalDialog(url,window,'长宽高');打开A页面 此时把window传给 A页面了 A页面.js window.dialogArguments.tableID 这里可以直接获取到这个tableID的值 如:tableID.rows.lenght 兼容谷歌写法: 父页面.js if(window.showModalDialog==undefined) {//谷歌浏览器 window.opn(url,document,'height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') } 子页面.js
Var Table=null; if(window.opener!=underfine) {//谷歌 //获取子窗口对象 var win=window.opener //获取子窗口table Table=window.opner.TableID } else {//IE Table=window.dialogArguments.TableID ]
//var TableLength=Table.rows.length
for(i=1;i<Table.rows.length;i++)
{//如果要进行table插入,注意table.row(i)不兼容谷歌 table.row[0]兼容谷歌
var Table=Table
var cell=row.insertCell(0);
cell.align='center';
cell.innerHTML=Table.row[i].cells[0].innerHTML;
}
46.IE使用 window.parent.showMenu(自定义函数打开的页面or div) 谷歌如何关闭该页面
funtion showMenu(div){ 就是把传进来的div框架 插入到div.innerHtml里面 并显示 div.innerHtm=div div.style.display="block"; } 要注意的是 因为 window.parent.showMenu 是从父窗口打开的一个div样式 要在谷歌关闭 必须使用下面的写法 parent.document.getElementByID("div的ID").style.display="none";
如果别的IE下面使用parent写法,那么在谷歌兼容的时候 一定要考虑到parent加上 才能获取到dom树里面的元素
本文来自博客园，作者：12不懂3，转载请注明原文链接：https://www.cnblogs.com/LZXX/p/12085082.html
