兼容性处理-如何处理js浏览器兼容性问题

兼容处理:

请勿使用const，而应使用var.

问题描述:

Javascript访问给定CSS值的最基本语法是: object.style.property，但是某些CSS属性的名称与Javascript中的保留字相同，例如“ float”，“ for”，“ class”等等，不同浏览器的编写方式也不同.

在IE中写这个:

document.getElementById（“标题”）. style.styleFloat =“ left”;

在Firefox中写此内容

document.getElementById（“标题”）. style.cssFloat =“ left”;

兼容处理:

在编写前添加一个判断以确定浏览器是否为IE:

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

问题描述:

与“ float”属性相同，您还需要使用句法区分来访问

在IE中写这个:

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中这样写:

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("for");

兼容处理:

解决方案是首先确定浏览器类型.

问题描述:

类似地，由于class是Java保留字，因此这两种浏览器使用不同的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属性时js浏览器兼容问题，两个浏览器也具有相同的区别.

　setAttribute("className",value);

此措辞适用于IE8.0之前的所有版本的IE. 注意: IE8.0也不支持“ className”属性.

setAttribute（“类”，值）；适用于IE8.0和firefox.

兼容处理:

方法一，两种都写上：var myObject = document.getElementById("header");myObject.setAttribute("class","classValue");myObject.setAttribute("className","classValue"); //设置header的class为classValue方法二，IE和FF都支持object.className，所以可以这样写：var myObject = document.getElementById("header");myObject.className="classValue";//设置header的class为classValue方法三，先判断浏览器类型，再根据浏览器类型采用对应的写法。

getElementById

问题描述:

<!-- input对象访问1 --><input id="id" type="button" value="click me" ōnclick="alert(id.value)"/>

在Firefox中，按钮不响应. 在IE中，这是可以的，因为对于IE，HTML元素的ID可以直接用作脚本中的变量名称，而不能在Firefox中使用.

兼容处理:

尽可能使用W3C DOM. 访问对象时，请使用document.getElementById（“ id”）通过ID访问该对象，并且ID在页面上必须唯一. 还要通过标签名称访问对象. 那时，请使用document.getElementsByTagName（“ div”）[0]. 更多浏览器支持此方法.

<!-- input对象访问2 --><input id="id" type="button" value="click me"  onclick="alert(document.getElementById('id').value)" />

访问集合对象

问题描述:

在IE下，您可以使用（）或[]获取集合对象；在Firefox下，您只能使用[]获取集合对象

document.write(document.forms("formName").src);

//此方法可以访问IE下Form对象的scrc属性.

兼容处理:

将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。

框架参考

问题描述:

IE可以通过ID或名称访问与此框架相对应的窗口对象，

Firefox只能按名称访问与此框架相对应的窗口对象.

例如，如果将上面的框架标签写在最上方窗口的htm中，则可以这样访问它:

IE: window.top.frameId或window.top.frameName访问此窗口对象；

Firefox: 只有该window.top.frameName可以访问此窗口对象.

兼容处理:

使用框架名称访问框架对象. 另外，您可以使用window.document.getElementById（“ frameId”）在IE和Firefox中访问框架对象.

parentElement

问题描述:

支持parentNode和parentNode在IE中获取父节点. Firefox只能使用parentNode.

兼容处理:

由于firefox和IE都支持DOM，所以parentNode用于访问父节点.

表操作

问题描述:

在IE下的表中插入innerHTML或appendChild均无效，而其他浏览器则正常显示.

兼容处理:

将<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);

删除节点removeNode（）和removeChild（）

问题描述:

appendNode可以在IE和Firefox中正常使用，但是removeNode只能在IE中使用.

removeNode方法的功能是删除节点，语法为node.removeNode（false）或node.removeNode（true），返回值为已删除的节点.

removeNode（false）表示仅删除指定的节点，然后将该节点的原始子节点提升为原始父节点的子节点.

removeNode（true）表示删除指定的节点及其所有从属节点. 删除的节点变为孤立节点，不再有子节点和父节点.

兼容处理:

Firefox中没有用于节点的removeNode方法，您只能使用removeChild方法，先返回到父节点，然后从父节点中删除要删除的节点:

node.parentNode.removeChild（节点）； //为了在ie和firefox下正常工作，请获取上一层的父节点，然后将其删除.

childNodes获得的节点

问题描述:

IE和Firefox中childNodes下标的含义不同

兼容处理:

方法一，获取子节点时，可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构。方法二，在实际运用中，Firefox在遍历子节点时，不妨在for循环里加上：if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。

Firefox不支持innerText

问题描述:

Firefox不支持innerText，它支持textContent来实现innerText，但是textContent不考虑innerText之类的元素的显示方法，因此它与IE不完全兼容. 如果不使用textContent，则可以使用innerHTML代替HTML代码.

兼容处理:

通过判断浏览器类型来兼容：if(document.all){document.getElementById('element').innerText = "my text";} else{document.getElementById('element').textContent = "my text";}

window.event

问题描述:

function et(){ alert(event);//IE: [object]}以上代码在IE运行的结果是[object]，而在Firefox无法运行。

因为事件是IE中window对象的属性，所以可以直接使用它，但是在Firefox中，使用W3C模型. 它通过传递参数来传播事件，这意味着您需要提供函数提供事件响应接口.

兼容处理:

添加对event判断，根据浏览器的不同来得到正确的event：function et(){ evt=evt?evt:(window.event?window.event:null);  　　//兼容IE和Firefoxalert(evt);}

获取键盘值

问题描述:

IE和Firefox使用不同的方法来获取键盘值. 可以理解，Firefox中的event.key与IE中的event.keyCode等效.

兼容处理:

function myKeyPress(evt){//兼容IE和Firefox获得keyBoardEvent对象evt = (evt) ? evt : ((window.event) ? window.event : "")  //兼容IE和Firefox获得keyBoardEvent对象的键值var key = evt.keyCode?evt.keyCode:evt.which; if(evt.ctrlKey && (key == 13 || key == 10)){  　　　　　　//同时按下了Ctrl和回车键//do something;}}

获取事件源

问题描述:

使用事件委托时，事件源用于确定事件来自哪个元素，

但是，

在IE中，事件对象具有srcElement属性，但没有目标属性；

在Firefox中，偶数对象具有target属性，但没有srcElement属性.

兼容处理:

ele=function(evt){ //捕获当前事件作用的对象   evt=evt||window.event;　　return 　　(obj=event.srcElement?event.srcElement:event.target;);}

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-193044-1.html