浏览器兼容的 JS 写法总结,涵盖的内容很全面,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、元素查找问题
1. document.all[name]
(1) 现有问题:Firefox 不支持 document.all[name]
(2) 解决方法:使用 getElementsByName(name),getElementById(id) 等来替代。
2. 集合类对象问题
(1) 现有问题:IE 中对许多集合类对象取用时可以用 (),但在 Firefox 只能用 []。
如:IE 中可以使用 document.forms("formName") 来返回名字为 "formName" 的 Form,但在 Firefox 却行不通。
(2) 解决方法:使用 [],上例中可以改为 document.forms["formName"]
3. html 元素的 ID 在 JavaScript 可见
(1) 现有问题:IE 中 HTML 元素中的 ID 可以作为 document 的下属对象变量名直接使用。在 Firefox 中不能。
(2) 解决方法:使用 getElementById("idName") 代替 idName 作为对象变量使用。
4. eval(idName) 取得对象
(1) 现有问题:在 IE 中,利用 eval(idName) 可以取得 ID 为 idName 的 HTML 对象,在 Firefox 中不能。
(2) 解决方法:用 getElementById(idName) 代替 eval(idName)。
5. 变量名与某 HTML 对象 ID 相同
(1) 现有问题:在 Firefox 中,因为对象 ID 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
(2) 解决方法:在声明变量时,一律加上 var,以避免歧义,这样在 IE 中亦可正常运行。此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
注:3、4 和 5 都属于同一类的问题。
6. Frame
(1) 现有问题:在 IE 中可以用 window.top.frameId 和 window.top.frameName 来得到该 Frame 所代表的 Window,Firefox 中只能用 window.top.frameName。
(2) 解决方法:将 Frame 的 Id 和 Name 设置成相同,使用 window.top.frameName 来访问 Frame。
二、DOM 操作
1. 设置元素的文本内容。
(1) 现有问题:IE 使用 innerText,而 Firefox 使用 textContent 来设置元素文本内容。
(2) 解决方法:如果文本内容不包含 "<"和">" 等特殊字符,可以使用 innerHTML。否则,可以使用:
- var child = elem.firstChild;
- if (child != null) elem.removeChild(child);
- elem.appendChild(document.createTextNode(content));
2. parentElement,parent.children
(1) 现有问题:IE 可以使用 parentElement 获得父结点,parent.children 得到结点的所有孩子结点。Firefox 不支持。
(2) 解决方法:使用 parentNode 和 parent.childNodes。
3. 对 childNodes 的解释。
(1) 现有问题:IE 和 Firefox 中对 childNodes 的解释不同,IE 不会包含空白文本结点,而 Firefox 会包含。
(2) 解决方法:使用 childNodes 过滤文本结点,如下:
- var children = elem.childNodes;
- for (i = 0; i < children.length; i++) {
- if (children[i].nodeType != 3) { // 过滤文本结点
- // ...
- }
- }
4. 对 document.getElementsByName 的解释。
(1) 现有问题:IE 中 getElementsByName 只会检查和元素,而在 Firefox 下会检查所有元素。
(2) 解决方法:不要使用 getElementsByName 检查除和之外的元素,如果要获得单个元素,尽量使用 getElementById。
5. 对 document.getElementById 的解释。
(1) 现有问题:IE 中 getElementById 不仅检查 Id 属性,也会检查 Name 属性,当 Name 属性匹配参数时也会返回该元素。而在 Firefox 中只会检查 Id 属性。
(2) 解决方法:尽量保持 Id 和 Name 相同,不要让一个元素 name 属性和另一个元素的 id 属性相同。
三、事件
1. event.x 与 event.y 问题
(1) 现有问题:在 IE 中,event 对象有 x,y 属性,Firefox 中没有。
(2) 解决方法:在 Firefox 中,与 event.x 等效的是 event.pageX。可以使用:
mX = event.x ? event.x : event.pageX;
2. window.event
(1) 现有问题:使用 window.event 无法在 Firefox 上运行
(2) 解决方法:
原代码 (可在 IE 中运行):
- <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
- ...
- <script language="javascript">
- function gotoSubmit() {
- ...
- alert(window.event); // use window.event
- ...
- }
- </script>
新代码 (可在 IE 和 Firefox 中运行):
- <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
- ...
- <script language="javascript">
- function gotoSubmit(evt) {
- evt = evt ? evt : (window.event ? window.event : null);
- ...
- alert(evt); // use evt
- ...
- }
- </script>
3. attachEvent 和 addEventListener
(1) 现有问题:IE 中使用 attachEvent 来添加事件,Firefox 中使用 addEventListener。
(2) 解决方法:如下,注意事件参数的区别,一个是 click,一个是 onclick。
if (document.attachEvent) document.attachEvent("click", clickHandler,false);
else document.addEventListener("onclick",clickHandler);
四、语法
1. const
(1) 现有问题:在 IE 中不能使用 const 关键字。如 const constVar = 32; 在 IE 中这是语法错误。
(2) 解决方法:不使用 const,以 var 代替。
2. 多余的逗号
(1) 现有问题:firefox 中对象文字常量容许多余的逗号,在 IE 中不允许。下面语句在 IE 中非法。
var obj = {'key' : 'aaa',}
(2) 解决方法:去掉多余逗号。
五、XML
1. 创建 XMLHttpRequest
(1) 现有问题:Firefox 使用 XMLHttpRequest,IE 使用 ActiveXObject。
(2) 解决方法:
- if (window.XMLHttpRequest) {
- req = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- req = new ActiveXObject("Microsoft.XMLHTTP");
- }
2. 创建 DOM
(1) 现有问题:Firefox 和 IE 创建 DOM 的方式不同。
(2) 解决方法:
- function createXmlDom() {
- var oXmlDom;
- if (Window.ActiveXObject) { // IE
- oXmlDom = new ActiveXObject("Microsoft.XmlDom");
- } else { // Firefox
- oXmlDom = document.implementation.createDocument("", "", null);
- }
- }
3. 加载 XML
(1) 现有问题:如果要加载外部文件 IE 和 Firefox 都可以用:
oXmlDom.async=false; // 这在 Firefox 中是必须的
oXmlDom.load("test.xml");
但是它们加载 xml 字符串的方式不一样,IE 中直接可以使用 oXmlDom.loadXML("
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString("
(2) 解决方法:比较好的方法是给 Firefox 产生的 XMLDom 加上 loadXML 方法:
if (isFirefox) { // 需要浏览器检测
- Document.prototype.loadXML = function(sXml) {
- var oParser = new DOMParser();
- var oXmlDom = oParser.parseFromString(sXml, "text/xml");
- while (this.firstChild) this.removeChild(this.firstChild);
- for (var i = 0; i < oXmlDom.childNodes.length; i++) {
- var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
- this.appendChild(oNewNode);
- }
- }
- }
这样在 IE 和 Firefox 就可以调用 loadXML 方法了。
4. XPath 支持
(1) 现有问题:IE 中可以直接用 XmlDOM 的 selectNodes 来根据 XPath 表示式来选择结点,Firefox 则比较复杂,需要使用 XPathEvaluator。
IE:
- var lstNodes = oXmlDom.documentElement.selectNodes("employee/name");
- for (var i = 0; i < lstNodes.length; i++) {
- alert(lstNodes[i].firstChild.nodeValue);
- }
Firefox:
- var oEvaluator = new XPathEvaluator();
- var oResult = oEvaluator.evaluate("employee/name", oXmlDom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
- var oElement = oResult.iterateNext();
- while (oElement) {
- alert(oElement.firstChild.nodeValue);
- oElement = oResult.iterateNext();
- }
(2) 解决方法:比较好的方法给 Firefox 的 Element 添加 selectNodes 方法。
- if (isFirefox) { // 需要浏览器检测
- Element.prototype.selectNodes = function(sXPath) {
- var oEvaluator = new XPathEvaluator();
- var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
- var aNodes = new Array();
- if (oResult != null) {
- var oElement = oResult.iterateNext();
- while (oElement) {
- aNodes.push(oElement);
- oElement = oResult.iterateNext();
- }
- }
- return aNodes;
- }
- }
这样在 IE 和 Firefox 中就都可以调用 selectNodes 方法了。
5. XSLT 支持
(1) 现有问题:IE 中可以使用 XmlDOM 的 transferNode 方法将其转换成 html,而 Firefox 需要使用 XSLTProcessor。
IE:
- oXmlDom.load("employee.xml");
- oXslDom.load("employee.xslt");
- var sResult=oXmlDom.transformNode(oXslDom);
Firefox:
- var oProcessor = new XSLTProcessor();
- oProcessor.importStylesheet(oXslDom);
- var oResultDom = oProcessor.transformToDocument(oXmlDom);
- var oSerializer = new XMLSerializer();
- var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
- alert(sXml);
(2) 解决方法:比较好的方法给 Firefox 的 Node 添加 transferNode 方法。
- if (isFirefox) { // 需要浏览器检测
- Node.prototype.transformNode = function(oXslDom) {
- var oProcessor = new XSLTProcessor();
- oProcessor.importStylesheet(oXslDom);
- var oResultDom = oProcessor.transformToDocument(oXmlDom);
- var oSerializer = new XMLSerializer();
- var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
- return sXml;
- }
- }
这样在 IE 和 Firefox 中就都可以调用 transferNode 方法了。
来源: http://www.phperz.com/article/17/0222/266131.html