js 兼容性问题

js兼容ff

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox

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中运行)：

...


新代码(可在IE和MF中运行)：

...

此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

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

5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 (idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 (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标签中书写了以下属性：

那么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对象

以下面的frame为例：


(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";

9. 在mf中，自己定义的属性必须getAttribute()取得

10.在mf中没有 parentElement parement.children而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如

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 元素（是否还有其它不能取的元素还不知道）。

 

17.集合类对象问题 
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

18.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

19.eval("idName")问题 
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

20.event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

21.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

22.模态和非模态窗口问题 
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener;
 parWin.document.getElementById("Aqing").value = "Aqing";

23. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();

24.innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent。 
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

25. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

26. innerHTML的区别 
Firefox不支持innerHTML, 解决办法可以如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有内容，加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);

 

总结

随着以Firefox为代表的第三方浏览器的兴起，我们做的网站也不能再JUST IE了，如果把原来的一些#代码放到IE以外的浏览器的话，往往都不能正常运行或出错，所以这里介绍一下怎么改进我们的JS，让它能更加规范，更加具有兼容性。

    示例代码：
    
    
     
      
         不吃苹果
      
     
    
    

1、尽量采用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")

2、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("我是香蕉")}

3、 关于Firefox下的onload问题

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

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

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

    IE下TABLE无论是用innerHTML还是appendChild插入都没有效果，而其他浏览器却显示正常。解决他的方法是，将加到TABLE的元素中，如下面所示：

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

 

浏览器差异对比表

序号	操作	分类	IE (6.0)	FireFox (2.0)	Mozilla (1.5)	当前 浏览器	备注
1	"."	访问tag的固有属性	OK	OK	OK	OK
2	"."	访问tag的用户定义属性 eg: myattr="test">	OK	NO	NO	OK	可以用getAttribute函数 替代
3	obj.getAttribute	访问tag的固有属性	OK	OK	OK	OK
4	obj.getAttribute	访问tag的用户定义属性 eg: myattr="test">	OK	OK	OK	OK
5	document.all	访问document的所有子元素 eg：document.all	OK	OK	NO	OK	建议用childNodes对象或者getElementById函数实现对应操作。 有人说它不能取Div元素，测试结果是可以，不知道是不是还有其它因素会影响测试结果。
6	obj.all	访问非document元素的所有子元素 eg: document.getElementById("mydiv").all	OK	NO	NO	OK	同上
7	getElementById()	根据元素的id/name来取得元素。 如果元素只设置name属性,没有设置id属性。	OK	NO	NO	OK	注意：很多元素是没有name属性的,eg: td, div,span...
8	变量名 = ""	隐式定义变量-通过向变量名附值方式定义一个新的变量。	OK	OK	OK	OK	建议：为避免必要的麻烦，显示定义变量。 eg：var tmp;
9	id	通过id直接调用对象 eg: test_result_1.innerHTML = ""	OK	OK	NO	OK	eval()函数用来执行脚本，所以向eval函数里面传入对象id/name的话，IE同样会返回对象的引用。 建议用document.getElementById(id)方式调用 注意：因为这个原因，IE中隐式定义的变量不能和HTML中元素的id/name相同。
10	name	通过name直接调用对象 eg: test_for_this_name.innerHTML = ""	OK	NO	NO	OK	同上/ 原因同7
11	name	支持的特殊字符（"!",".","@","#","$","<",...） eg: document.getElementsByName("aaaa!page");	NO	OK	OK	NO	其它的字符没有测试
12	tr.innerHTML = ""	设置TR元素的内部HTML脚本	NO	OK	OK	NO	在IE中，table、tr的innerHTML是只读属性，不能够对其直接设置。可以通过insertRow/insertCell函数进行设置。
13	cells对象访问	访问tr的cells对象 前提：tr元素是被删除后的tr对象，或者是用cloneNode(true)复制的删除前的tr对象	NO	OK	OK	undefined	可以将其插入Table再访问，或者可以用getElementsByTagName函数 对td/th访问。 删除后的rows对象不存在这个问题。其它元素？
14	（index）	访问集合类对象 eg: document. getElementsByTagName("TD")(0)	OK	NO	NO	OK	建议用正式的操作符"[]".
15	obj.toString()	取得对象的字符串"[object 对象类型的名称]". eg: td == "[object HTMLTableCellElement]"	NO	OK	OK	NO	可以省略toString()函数，直接用对象来操作。 注：在IE中返回"[object]"。
16	obj.class	定义对象的css式样/风格。 eg: td.class="XPstyle";	NO	OK	NO	-	无法写测试代码，会有编译错误！可以自己用typeof(class) == null来测试一下，没有异常就在代码中可以使用。 在HTML脚本中用class，但是在Javascript中应该用classname(class是JS的保留关键字). 注意：用 setAttribute可以把class值设置到对象中去，但是不会被当作css式样来解析。
17	const	保留关键字，用于定义常量。 eg：const HOURS = 24;	NO	OK	OK	-	暂时只能不使用const。
18	input.type	变更input元素的类型 eg: input.type="button";	NO	OK	OK	NO	IE可以初始input元素类型，但是不能变更类型。 如果必须变更，可以用更换input元素的方式。
19	obj.children	访问对象的子元素集合 eg: document.body.children.length;	OK	NO	NO	OK	可以用childNodes对象替代。
20	node.replaceNode	替换新的节点对象 eg: oldNode.replaceNode(newNode);	OK	NO	NO	OK	可以用replaceChild函数替换。
21	node.removeNode	删除已有节点对象 eg.oldNode.removeNode(true);	OK	NO	NO	OK	可以用oldNode.parentNode.removeChild(oldNode)方式实现。
22	node.insertBefore	在指定节点对象前面插入一个节点对象 document.body.insertBefore(newN, oldN);	OK	OK	OK	OK
23	obj.parentElement	访问对象的父元素 eg: document.body.parentElement.id;	OK	NO	NO	OK	可以用parentNode对象替代。
24	obj.childNodes.length	返回子节点的数量，和tag的数量相同。 eg:document.body.childNodes.length;	OK	NO	NO	OK	FF/Mozilla中，空白或者换行是文本节点，是childNodes的成员。 可以用node.getElementsByTagName()回避。
25	obj. insertAdjacentElement	向指定的位置插入元素 eg: obj.insertAdjacentElement("beforeBegin",button);	OK	NO	NO	OK	insertAdjacentElement函数和insertAdjacentText函数也类似。 可以用insertBefore函数实现类似功能。
26	createElement()	创建指定类型元素。 前提：元素为HTML脚本 eg：document.createElment("");	OK	NO	NO	OK	可以先创建出对象元素，再进行属性设置；或者直接以InnerHTML的形式加到对应位置。
27	nodeName	取对象(tag,attribute,textnode)节点名称 eg: name = obj.nodeName;	OK	OK	OK	OK	有人说存在差异，不知道是具体的前提条件，先记录备考。 替代方案： 如果节点是tag元素可以用"tagName"取值；如果节点是attribut对象可以用"name"取值;如果节点是textnode元素可以用nodeType==3判断。
28	window.event	取得当前的事件对象 eg: window.event;	OK	NO	NO	?	可以主动向事件的响应函数传入event参数。 eg:help
29	event.target	取得事件的触发对象 eg: e.target;	NO	OK	OK	？	可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。 eg:help
30	event.srcElement	取得事件的触发对象 eg: e.srcElement;	OK	NO	NO	？	可以和target共同使用;可以主动向事件的响应函数传入触发对象。 eg: var obj = (e.target) ? e.target : e.srcElemtn;
31	event对象属性	当前三个浏览器的共同拥有的属性： altKey button cancelBubble clientX clientY ctrlKey screenX screenY shiftKey type	altLeft behaviorCookie behaviorPart bookmarks boundElements contentOverflow ctrlLeft dataFld dataTransfer fromElement keyCode nextPage offsetX offsetY propertyName qualifier reason recordset repeat returnValue srcElement shiftLeft srcFilter srcUrn toElement wheelDelta x y	bubbles cancelable currentTarget detail eventPhase explicitOriginalTarget isChar isTrusted layerX layerY metaKey originalTarget pageX pageY rangeOffset rangeParent relatedTarget target timeStamp view which	bubbles cancelable charCode currentTarget detail eventPhase explicitOriginalTarget isChar keyCode layerX layerY metaKey originalTarget pageX pageY popupWindowURI rangeOffset rangeParent relatedTarget requestingWindowURI target timeStamp view which	?	event对象的不同点太多，在使用的时候需要一一检查才行。具体可以用页面下方的测试区域试验。
32	注册event	用attachEvent函数注册	OK	NO	NO	-	小心内存泄漏！！！ 事件处理完后一定要调用detachEvent函数销毁事件，而且要注意避免重复注册。
33	注册event	addEventListener函数注册	NO	OK	OK	-
34	注册event	obj.onxxx = Function("响应函数名称或代码");方式注册 eg: btn.onclick = Function(doclick); btn.onclick = Function("return 1+1;");	OK	OK	OK	-
35	销毁event	detachEvent函数销毁	OK	NO	NO	-
36	销毁event	removeEventListener函数销毁	NO	OK	OK	-
37	销毁event	obj.onxxx = null;方式注册 eg: btn.onclick = null;	OK	OK	OK	-
38	触发event	fireEvent函数 eg:btn.fireEvent("onclick"); FF: var e = document.createEvent("Events"); e.initEvent("click", true, false); element.dispatchEvent(event)	OK	NO	NO	-
39	触发event	dispatchEvent函数 eg: var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true); btn.dispatchEvent(evt);	NO	OK	OK	-