javascript兼容性

技术2022-05-19 22

JavaScript兼容性一直是Web开发者的一个主要问题，为此，总结下IE和Firefox的Javascript兼容性:

参考：

一、函数和方法差异

1. getYear()方法

【分析说明】先看一下以下代码：

var year= new Date().getYear(); document.write(year);

　　在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】

　　加上对年份的判断，如:

var year= new Date().getYear(); year = (year<1900?(1900+year):year); document.write(year);

　　也可以通过 getFullYear getUTCFullYear 去调用:

var year = new Date().getFullYear(); document.write(year);

2. eval()函数

【分析说明】在IE中，可以使用eval("idName") 或getElementById("idName")来取得id为idName的 HTML对象；Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。

3. const声明

【分析说明】在 IE 中不能使用 const 关键字。如：

const constVar = 32;

在 IE中这是语法错误。

【兼容处理】不使用 const ，以 var 代替。

4. var

【分析说明】请看以下代码：

echo=function(str){ document.write(str); } pre>

　　这个函数在IE上运行正常，Firefox下却报错了。

【兼容处理】而在echo前加上var就正常了，这个就是我们提到var的目的。

5. const 问题

【分析说明】在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

【解决方法】不使用 const ，以 var 代替。

二、样式访问和设置

1. CSS的"float"属性

【分析说明】Javascript访问一个给定 CSS 值的最基本句法是：object.style.property，但部分CSS属性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同浏览器写法不同。

在IE中这样写：

document.getElementById("header").style.styleFloat = "left";

在Firefox中这样写：

document.getElementById("header").style.cssFloat = "left";

【兼容处理】在写之前加一个判断，判断浏览器是否是 IE：

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

2. 访问<label>标签中的"for"

【分析说明】和"float"属性一样，同样需要使用不现的句法区分来访问<label>标签中的"for"。

在IE中这样写：

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

在 Firefox中这样写：

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

【兼容处理】解决的方法也是先判断浏览器类型。

3. 访问和设置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。

【兼容处理】

方法一，两种都写上：

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

方法三，先判断浏览器类型，再根据浏览器类型采用对应的写法。

4. 对象宽高赋值问题

【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;

三、DOM方法及对象引用

1. getElementById

【分析说明】先来看一组代码：

<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 id="id" type="button" value="click me" οnclick="alert(document.getElementById('id').value)" />

2. 集合类对象访问

【分析说明】IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。如：

document.write(document.forms("formName").src); //该写法在IE下能访问到Form对象的scrc属性

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

3. frame的引用

【分析说明】IE可以通过id或者name访问这个frame对应的window对象，而Firefox只可以通过 name来访问这个frame对应的window对象。

　　例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问：

IE： window.top.frameId或者window.top.frameName来访问这个window对象；

Firefox：只能这样window.top.frameName来访问这个window对象。

【兼容处理】使用frame的name来访问frame对象，另外，在IE和Firefox中都可以使用 window.document.getElementById(”frameId”)来访问这个frame对象。

4. parentElement

【分析说明】IE中支持使用 parentElement和parentNode获取父节点。而Firefox只可以使用parentNode。

【兼容处理】因为 firefox与IE都支持DOM，因此统一使用parentNode来访问父节点。

5. table操作

【分析说明】IE下table中无论是用innerHTML还是appendChild插入<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);

6. 移除节点removeNode()和removeChild()

【分析说明】 appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。

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

　　removeNode（false）表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。

　　 removeNode（true）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。

【兼容处理】Firefox中节点没有removeNode方法，只能用removeChild方法代替，先回到父节点，在从父节点上移除要移除的节点。

node.parentNode.removeChild(node); // 为了在ie和firefox下都能正常使用，取上一层的父结点，然后remove。

7. childNodes获取的节点

【分析说明】childNodes的下标的含义在IE和Firefox中不同，看一下下面的代码：

分别用IE和Firefox运行，IE的结果是3，而Firefox则是7。Firefox使用DOM规范，"#text"表示文本（实际是无意义的空格和换行等）在Firefox里也会被解析成一个节点，在IE里只有有实际意义的文本才会解析成"#text"。

【兼容处理】

方法一，获取子节点时，可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构。

方法二，在实际运用中，Firefox在遍历子节点时，不妨在for循环里加上：

if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。

这样可以跳过一些文本节点。

延伸阅读

　　《IE和 FireFox中的childNodes 区别》

8. Firefox不能对innerText支持

【分析说明】Firefox不支持innerText，它支持textContent来实现 innerText，不过textContent没有像 innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用 innerHTML代替。也可以用js写个方法实现，可参考《为firefox实现innerText属性》一文。

【兼容处理】通过判断浏览器类型来兼容：

if(document.all){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = "my text"; }

四、事件处理

　　如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once 》），它们分别是NN4、 IE4+和W3C/Safar。

1. window.event

【分析说明】先看一段代码

function et() { alert(event);//IE: [object] }

　　以上代码在IE运行的结果是[object]，而在Firefox无法运行。

　　因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event判断，根据浏览器的不同来得到正确的event：

function et() { evt=evt?evt:(window.event?window.event:null); 　　//兼容IE和Firefox alert(evt); }

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同，可以理解，Firefox下的event.which与IE下的 event.keyCode相当。关于彼此不同，可参考《键盘事件中 keyCode、which和charCode 的兼容性测试》

【兼容处理】

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; } }

3. 事件源的获取

【分析说明】在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

【兼容处理】

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

4. 事件监听

【分析说明】在事件监听处理方面，IE提供了attachEvent和 detachEvent两个接口，而Firefox提供的是 addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口：

　　需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。

5. 鼠标位置

【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有 pageX，pageY属性，但是没有x，y属性。

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的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); }

其他差异的兼容处理

1. XMLHttpRequest

【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。

【兼容处理】

2. 模态和非模态窗口

【分析说明】IE中可以通过showModalDialog和 showModelessDialog打开模态和非模态窗口，但是Firefox不支持。

【解决办法】直接使用 window.open(pageURL,name,parameters)方式打开新窗口。如果需要传递参数，可以使用 frame或者iframe。

3. input.type属性问题

IE 下 input.type属性为只读，但是Firefox下可以修改

4. 对select元素的option操作

设置options，IE和Firefox写法不同：

Firefox:可直接设置

option.text = 'foooooooo';

IE: 只能设置

option.innerHTML = 'fooooooo';

删除一个select的option的方法：

Firefox:可以

select.options.remove(selectedIndex);

IE7: 可以用

select.options[i] = null;

IE6: 需要写

select.options[i].outerHTML = null;

5. img对象alt和title的解析

【分析说明】img对象有alt和 title两个属性，区别在于，alt：当照片不存在或者load错误时的提示。

title：照片的tip说明, 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用

在定义img对象时。

【兼容处理】最好将alt和title对象都写全，保证在各种浏览器中都能正常使用。

6. img的src刷新问题

【分析说明】先看一下代码：

在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。

【兼容处理】在地址后面加个随机数就解决了:

总结

　　IE和 Firefox的Javascript方面存在着不少的差异，要做到兼容，我觉得很有必要把一些常见的整理成一个js库，如DOM的操作，事件的处理，XMLHttpRequest请求等，或者也可以选择使用现有的一些库(如jQuery，YUI，ExtJs等)，

不过我觉得还是有必要了解一下这些差异，这样对于我们参加兼容性和可用性代码很有帮助。办法总比问题多，无论浏览器兼容如何折腾人，做前端开发的总能迎刃而解的！

Javascript中的常见问题 1. 集合类对象问题现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox 不能。解决方法：改用 [] 作为下标运算。如：document.forms("formName") 改为 Js代码 document.forms["formName"]; //又如： document.getElementsByName("inputName")(1); // 改为 document.getElementsByName("inputName")[1]; document.forms["formName"]; //又如： document.getElementsByName("inputName")(1); //改为 document.getElementsByName("inputName")[1]; 2. DIV对象在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 Firefox 中不能。 DivId.style.display = "none"; 解决方法：document.getElementById("DivId").style.display = "none"; ps:得对象的方法不管是不是DIV对象，都应该使用getElementById方法。 3. 关于frame 现有问题：在 IE中可以用window.testFrame取得该frame，mf中不行解决方法：在 frame的使用方面Firefox和IE的最主要的区别是：如果在frame标签中书写了以下属性：那么IE可以通过id或者 name访问这个frame对应的window对象而mf只可以通过name来访问这个frame对应的window对象例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问 IE： window.top.frameId或者window.top.frameName来访问这个window对象 Firefox：只能这样 window.top.frameName来访问这个window对象另外，在mf和ie中都可以使用 window.top.document.getElementById("frameId")来访问frame 标签并且可以通过 window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容 4. 窗口现有问题：IE中可以通过 showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。解决办法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要传递参数，可以使用frame或者 iframe。 5. 在JS中定义各种对象变量名时，尽量使用id，避免使用name. 在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 Firefox 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。 6. document.all Firefox 可以兼容document.all，但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替不过对于document.all.length等属性，则完全不兼容。大家尽量不要使用document.all属性. 7. parentElement IE中支持使用 parentElement和parentNode获取父节点. 而Firefox只可以使用parentNode. 8. event W3C不支持windows.event 比方说,在IE里面: Js代码 function onMenuClick(){ collapseMenu(event.srcElement); } function onMenuClick(){ collapseMenu(event.srcElement); } 工作正常。不过在Firefox中，则改成： Js代码 function onMenuClick(evt){ if(evt == null) evt = window.event; // For IE var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target collapseMenu(srcElement); function onMenuClick(evt){ if(evt == null) evt = window.event; // For IE var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target collapseMenu(srcElement); 9. event.x 与 event.y 问题在IE 中，event 对象有 x, y 属性，Firefox中没有。解决方法: 在Firefox中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。故采用 event.clientX 代替 event.x。在IE 中也有这个变量。 event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。如果要完全一样，可以稍麻烦些： Js代码 mX = event.x ? event.x : event.pageX; mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x 10. 用idName字符串取得对象的问题在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在Firefox中不能。解决办法:用 getElementById(idName) 代替 eval(idName). 14. nodeName 和 tagName 问题在Firefox中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE中nodeName 的使用有时会有问题。解决方法：使用 tagName，但应检测其是否为空。 15. input的type属性 IE下 input.type属性为只读，但是Firefox下可以修改. 16. 自定义属性在mf中，自己定义的属性必须getAttribute()取得而IE可以直接通过"."运算符获取. 17.const 问题在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误. 解决方法: 不使用 const ，以 var 代替. 18. body 对象 Firefox 的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在. 19. img对象alt和title的解析 alt：当照片不存在或者load错误时的提示, title：照片的tip说明, 在 IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用在定义img对象时，最好将alt和title对象都写全，保证在各种浏览器中都能正常使用 20.childNodes获取的节点 childNodes 的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。获取子节点时,一般可以通过node.getElementsByTagName()来回避这个问题。 21.removeNode() Firefox 中节点没有removeNode方法，必须使用如下方法 Js代码 node.parentNode.removeChild(node); node.parentNode.removeChild(node); 22.innerText IE 支持，FIREFOX不支持 FF中设置内容文本是用textConent属性. 23. XMLHTTP的区别 FireFox 中的创建方法为: Js代码 xmlhttp=new XMLHttpRequest() xmlhttp=new XMLHttpRequest() 而在IE中为: Js代码 xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”) xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”) 24. img的src刷新问题在IE 下可以用可以刷新图片，但在FireFox下不行。主要是缓存问题，在地址后面加个随机数就解决了: Js代码 myImg.src=this.src+’?'+Math.random(); myImg.src=this.src+’?'+Math.random(); 25. setAttribute()设置属性问题 IE中很多属性都不能用setAttribute进行设置,但Firefox中却可以,如: Js代码 theDiv.setAttribute('style','color:red'); //改为: object.style.cssText = 'color:red;'; setAttribute('class','styleClass') //改为: setAttribute('className','styleClass'); obj.setAttribute('onclick','funcitonname();'); //改为: obj.οnclick=function(){fucntionname();}; theDiv.setAttribute('style','color:red'); //改为: object.style.cssText = 'color:red;'; setAttribute('class','styleClass') //改为: setAttribute('className','styleClass'); obj.setAttribute('onclick','funcitonname();'); //改为: obj.οnclick=function(){fucntionname();}; ...等等 ----------------------------------------------------------------------------------------- IE和FIREFOX在解析CSS方面的区别 1. 对高度的解析 IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度 Firefox：没有定义高度时，如果内容中包括了图片内容，Firefox的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！ 3.布局问题当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现. 4. 鼠标样式 firefox不支持hand，但ie支持pointer 解决方法: 统一使用pointer 5. padding 问题 padding 5px 4px 3px 1px FireFox无法解释简写, 必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px; 6. 消除ul、ol等列表的缩进消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对 FireFox有效 7. CSS透明 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 8. CSS圆角 IE：不支持圆角。 FF： -moz-border-radius:4px，或者 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;。 9. CSS双线凹凸边框 IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080; 10. 滤镜 IE中支持使用滤镜,而Firefox中不支持. 11. 禁止选取网页内容：在IE中一般用js：obj.onselectstart=function(){return false;}; 而firefox用CSS:-moz-user-select:none; ----------------------------------------------------------------------------------------- 由ham利用google收集整理.如果还有更好的相关资源,欢迎分享. 若还有其它IE与FF不同的地方,或者代码中有什么不正确的地方,欢迎指出,我会及时更正. *Javascript 兼容多种浏览器* 随着以Firefox为代表的第三方浏览器的兴起，我们做的网站也不能再JUST IE了，如果把原来的一些javascript代码放到IE以外的浏览器的话，往往都不能正常运行或出错，所以这里介绍一下怎么改进我们的JS，让它能更加规范，更加具有兼容性。

示例代码： <body> <table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody> <tr> <td id="banana" style="color:red" & gt;不吃苹果</td> </tr> </tbody> </table> </body>

尽量采用W3C DOM 的写法

以前访问对象可能是： document.all.apple 或者 apple 现在应该采用： document.getElementById("apple") 以 ID来访问对象，且一个ID在页面中必须是唯一的 document.getElementsByTagName("div")[0] 以标签名来访问对象

原来设置对象的属性可能是： document.all.apple.width=100 或 apple.width=100 现在应该采用： document.getElementById("apple").setAttribute("width","100") document.getElementsByTagName("div")[0].setAttribute("width","100") 访问对象的属性则采用： document.getElementById("apple").getAttribute("width") document.getElementsByTagName("div")[0].getAttribute("width")

W3C DOM在IE下的一些限制

因为起先的IE占据整个浏览器95%的份额，没有竞争压力，所以这位老大就硬是要玩点另类，不完全按 WEB标准来搞。

在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性，因此我还得按原来的点记法来访问和设置，以达到兼容各种浏览器的效果,如： document.getElementById("banana").class document.getElementById("banana").style.color document.getElementById("banana").onclick document.getElementById("banana").class="fruit" document.getElementById("banana").style.color="blue" document.getElementById("banana").οnclick= function () {alert("我是香蕉")}

关于Firefox下的onload问题

function over(){ alert("页面加载完毕") }

正常情况下，我们赋与onload响应函数是： document.body.οnlοad= over 但是在Firefox下这样无法执行，所以我们都都采用下面这种形式： window.οnlοad=over

关于IE下TABLE无法插入新行的问题

IE 下TABLE无论是用innerHTML还是appendChild插入<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);

1. document.form.item 问题 (1)现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法：改用 document.formName.elements["elementName"] (3)其它参见 2

2. 集合类对象问题 (1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。 (2)解决方法：改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1] (3)其它

3. window.event (1)现有问题：使用 window.event 无法在 MF 上运行 (2)解决方法： MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：原代码(可在IE中运行)： <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/> ... <script language="javascript"> function gotoSubmit() { ... alert(window.event); // use window.event ... } </script>

新代码(可在IE和MF中运行)： <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/> ... <script language="javascript"> function gotoSubmit(evt) { evt = evt ? evt : (window.event ? window.event : null); ... alert(evt); // use evt ... } </script> 此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题 (1)现有问题在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。 (2)解决方法用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题 (1)现有问题在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。 (2)解决方法用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题 (1)现有问题在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。 (2)解决方法在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。 (3)其它参见问题4

7. event.x 与 event.y 问题 (1)现有问题在IE 中，event 对象有 x, y 属性，MF中没有。 (2)解决方法在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。故采用 event.clientX 代替 event.x。在IE 中也有这个变量。 event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些： mX = event.x ? event.x : event.pageX; 然后用 mX 代替 event.x (3)其它 event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame (1)现有问题在 IE中可以用window.testFrame取得该frame，mf中不行 (2)解决方法在frame的使用方面mf和ie的最主要的区别是：如果在frame标签中书写了以下属性： <frame src="xx.htm" id="frameId" name="frameName" /> 那么ie可以通过id或者name访问这个 frame对应的window对象而mf只可以通过name来访问这个frame对应的window对象例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问 ie： window.top.frameId或者window.top.frameName来访问这个window对象 mf：只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用 window.top.document.getElementById("frameId")来访问frame标签并且可以通过 window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容关于frame和window的描述可以参见bbs的‘window与frame’文章以及 /test/js/test_frame/目录下面的测试 ----adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得 10.在mf中没有 parentElement parement.children 而用 parentNode parentNode.childNodes childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和MF对parentNode的解释不同，例如 <form> <table> <input/> </table> </form> MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题 (1)现有问题: 在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。 (2)解决方法: 不使用 const ，以 var 代替。

12. body 对象 MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding 在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外，因为 tpl中符合xml规范，要求&书写为& 一般MF无法识别js中的&

14. nodeName 和 tagName 问题 (1)现有问题：在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题（具体情况没有测试，但我的IE已经死了好几次）。 (2)解决方法：使用 tagName，但应检测其是否为空。

15. 元素属性 IE下 input.type属性为只读，但是MF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题 (1)现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

大家好,非常高兴和大家一起研究这个做web(网页)都会遇到的技术问题。很多人说只要支持Internet Explorer[以下全部简称ie]就可以了，其他的浏览器可以忽略！其实是这样的，无论是在哪个统计看ie的市场占有率都有80%左右。为了这个问题上次还和php群的兄弟讨论了好久，他们还把自己的统计给我看：只有70%用ie!当时我晕了，想不到其他浏览器竟然占有这么多份额，另一个反应是想自己在开发时为什么不好好学习一下各个浏览器之间的差异呢？后来他说他的网站用户大部分不是中国的！那还行，可以缓一缓学习！但这也是迟早的事情，所以花了很多时间去整理和归纳这些差异，当然不可能自己去误咯，那是武林高手做的事情，于是自己找了点资料，还有作了一些测试，当然这也是有这篇文章的基础咯。好了废话不多说了（那些臭鸡蛋,烂番茄什么的就要飞过来了~），现在就开始代码之旅,这是一些零散的常见的问题，和大家一起研究分享,希望对大家有所帮助。第一:onload 网页加载完执行的函数，这个代码是从十大常用javascrīpt的函数里面摘取的，当然有其他的实现方法，但这个函数写的真的非常巧妙，有模有样的。从效率方面也是一个非常值得使用的函数! 以下就是具体代码: //-------------------------------------------------------- function addLoadEvent(func) { var ōldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } //-------------------------------------------------------- 我不想一句一句的分析这个addLoadEvent,那是高手们很难接受的!菜鸟说:你的起步是不是太高了,什么不说就要看什么函数?这个函数有什么了不起撒,不就是加载函数吗?大哥,给点面子行不?幸好,我是听着《狼》(bressanon布列瑟农)写东西的，比较平静的。呵呵~我们就来说说它的兼容性!请看函数中window.onload,作者为什么不用document.body.onload呢?那是因为在Firefox[以下全部简称ff] 下document.body.onload是undefined(未定义)，把一个函数赋值给undefined既不会发生什么事情，也不算出错!这个是让人头痛!好的,知道兼容性的厉害了吧?那么,以后就在编写代码时注意一下就好了! 第二:body 这个body对象也是困扰我们的东西,叫它对象不知道对不对?我也不是计算机专业的,专业术语真的不大清楚! 以下就是具体代码: //-------------------------------------------------------- function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } // Explorer 6 Strict else if (document.documentElement && document.documentElement.scrollTop){ yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll) return arrayPageScroll; } //-------------------------------------------------------- 这个函数作用是：浏览器滚动条滚动了的高度读取。这是从lightbox中摘录的,读读这段代码,看到三次判断: 1.if (self.pageYOffset)对ff进行判断处理; 2.if (document.documentElement && document.documentElement.scrollTop)是对网页标准(xHTML 1.1 DTD)的判断,这里要说明一下:在加入 xHTML 1.1 DTD 文件头时document.body.scrollTop之类的值往往是0,而这个是很难被调试察觉的(我曾因此困惑很久,这里吐血传授经验啦!); 3. 则是我们常用document.body.scrollTop。从这三次判断，可以想象作者思维的严密了！当然这是程序员的共性！第三:attachEvent/addEventListener 这里是比较直接的区别，可是太多的直接却照成了编程的困扰，这不禁使人想起：到底有多少这样的直接不同函数？他们的差别到底在哪里？毕竟大家的大脑空间有限，这么多怎么记？可是这些是必须记的！没事，这篇文章里常见的js兼容性都提到了，可以作为“家居旅行，随身携带”的小手册！以下就是具体代码: //-------------------------------------------------------- _observeAndCache: function(element, name, observer, useCapture) { if (!this.observers) this.observers = []; if (element.addEventListener) { this.observers.push([element, name, observer, useCapture]); element.addEventListener(name, observer, useCapture); } else if (element.attachEvent) { this.observers.push([element, name, observer, useCapture]); element.attachEvent('on' + name, observer); } } //-------------------------------------------------------- 意思是给对象添加事件。这是Sam Stephenson的prototype中类的一部分,举这段代码,不是让你去慢慢分析那个prototype.js文件,只是说明在ie和Opera 下就可以使用obj.attachEvent(),但在ff下却只能使用obj.addEventListener()。类似区别的还有 detachEvent/removeEventListener parentElement/parentNode insertAdjacentElement/appendChild srcElement/target onmousewheel/DOMMouseScroll clientY/pageY

第四:对象引用 1.getElementById 请看以下代码  <input id="t1"><input type="button" value="click me" ōnclick="alert(t1.value)">  <input id="t1"><input type="button" value="click me" ōnclick="alert(document.getElementById('t1').value)"> 两个都是获取文本框的值,但后者的兼容性就比前者好!对于ie 来说，一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用，而 ff 中不可以。 getElementById这个函数是非常有用、通用的函数,所以在引用对象时我们要尽量使用它! 2.var 请看以下代码 //-------------------------------------------------------- echo=function(str){ document.write(str); } //-------------------------------------------------------- 这个函数在ie上运行正常,ff下却报错了,而在echo前加上var就正常了,这个就是我们提到var的目的。 3.[] document.forms(”formName”) 改为 document.forms[”formName”]目的:现有代码中许多集合类对象取用时使用 ()，ie 能接受，ff 却不能。 4.frame 的引用 ie可以通过id或者name访问这个frame对应的window对象,而mf只可以通过name来访问这个frame对应的window对象

第五:脚本执行让我们分别做个试验，请出ie和ff分别运行一下下面一段js： //-------------------------------------------------------- o={ foo: function(){ alert("fly"); } }; with (o) { bar(); function bar(){ alert("fly"); } foo(); } //-------------------------------------------------------- ie下上面的代码成功输出fly,ff报错：bar未定义！当然这是一个小小的试验,大家很明显的看出ie和ff的支持执行的情况：ie脚本预解释执行，ff脚本顺序执行！这是javascrīpt编写和设计时必须注意的东西!

第六:XMLHttpRequest对象请看以下代码 //-------------------------------------------------------- function createRequest(){ if(typeof XMLHttpRequest!="undefined") { return new XMLHttpRequest(); }else if(typeof ActiveXObject!="undefined"){ var xmlHttp_ver = false; var xmlHttp_vers = [ "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp", "Microsoft.XmlHttp" ]; if(!xmlHttp_ver){ for(var i=0;i<xmlHttp_vers.length;i++){ try{ new ActiveXObject(xmlHttp_vers[i]); xmlHttp_ver = xmlHttp_vers[i]; break; }catch(oError){;} } } if(xmlHttp_ver){ return new ActiveXObject(xmlHttp_ver); }else{ throw new Error("Could not create XML HTTP Request."); } }else{ throw new Error("Your browser doesn't support an XML HTTP Request."); } } //-------------------------------------------------------- 意思是:得到XMLHttpRequest对象,是喜悦村里的一个兄弟写的。在ie下,一句new ActiveXObject("MSXML2.XMLHTTP")就可以搞定的东西,但这里我们花了这么多行代码来解决兼容性问题,这个函数作者更从原理入手：xmlHttp_vers 应该从版本高的往版本低的写，这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp。十分巧妙和有效地得到了对象! 好了,其实关于javascrīpt兼容性的例子还有很多,我们无法罗列所有,这里做了个简单介绍,更多的只能在编程工程中去慢慢体会了！当然本文仅仅讨论了js的兼容性，同时css的兼容性问题也是不可忽视的！解决兼容性最好的方法就是封装！那么下次有机会再和大家一起研究一下css的兼容性和js的封装问题！这篇结合自己的经验和网上朋友的经验凑成的文章就到这里了。不知道大家感觉怎样?有没有得到收益?如果有一点点,我的任务就完成了!

专利

最新回复(0)