Firefox与IE的一些Javascript编程小技巧-阿里云开发者社区

1. document.formName.item("itemName") 问题

说明 :IE 下 , 可以使用 document.formName.item("itemName") 或 document.formName.elements["elementName"];

Firefox 下 , 只能使用 document.formName.elements["elementName"].
解决方法 : 统一使用 document.formName.elements["elementName"].

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

3. 自定义属性问题

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

4.eval("idName") 问题

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

5. 变量名与某 HTML 对象 ID 相同的问题
说明 :IE 下 ,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用 ;Firefox 下则不能 .Firefox 下 , 可以使用与 HTML 对象 ID 相同的变量名 ;IE 下则不能。
解决方法 : 使用 document.getElementById("idName") 代替 document.idName. 最好不要取 HTML 对象 ID 相同的变量名 , 以减少错误 ; 在声明变量时 , 一律加上 var, 以避免歧义 .

6.const 问题

说明 :Firefox 下 , 可以使用 const 关键字或 var 关键字来定义常量 ;IE 下 , 只能使用 var 关键字来定义常量 .
解决方法 : 统一使用 var 关键字来定义常量 .

7.input.type 属性问题
说明 :IE 下 input.type 属性为只读 ; 但是 Firefox 下 input.type 属性为读写 .

8.window.event 问题

说明 :window.event 只能在 IE 下运行 , 而不能在 Firefox 下运行 , 这是因为 Firefox 的 event 只能在事件发生的现场使用 . Firefox 必须从源处加入 event 作参数传递。 Ie 忽略该参数，用 window.event 来读取该 event 。
解决方法 :
IE&Firefox:
Submitted(event)"/> …
<script language="javascript">
function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</script>

9.event.x 与 event.y 问题

说明 :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.

10.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 的兼容性问题。

11.window.location.href 问题

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

12. 模态和非模态窗口问题

说明 :IE 下 , 可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口 ;Firefox 下则不能 .
解决方法 : 直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口 , 可以在子窗口中使用 window.opener 来访问父窗口 . 例如： var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame 问题

以下面的 frame 为例：
<frame src="xxx.html" id="frameId" name="frameName" />

(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";

14.body 问题

Firefox 的 body 在 body 标签没有被浏览器完全读入之前就存在；而 IE 的 body 则必须在 body 标签被浏览器完全读入之后才存在 .

15. 事件委托方法

IE ： document.body.onload = inject; //Function inject() 在这之前已被实现

Firefox ： document.body.onload = inject();

16. firefox 与 IE 的父元素 (parentElement) 的区别

IE ： obj.parentElement
firefox ： obj.parentNode

解决方法 : 因为 firefox 与 IE 都支持 DOM, 因此使用 obj.parentNode 是不错选择 .

17.cursor:hand VS cursor:pointer

firefox 不支持 hand ，但 ie 支持 pointer

解决方法 : 统一使用 pointer

18.innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行 . 需用 textContent 。

解决方法 :

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

19. FireFox 中设置 HTML 标签的 style 时，所有位置性和字体尺寸的值必须后跟 px 。这个 ie 也是支持的。

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

21. padding 问题

padding 5px 4px 3px 1px FireFox 无法解释简写 ,

必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除 ul 、 ol 等列表的缩进时

样式应写成 :list-style:none;margin:0px;padding:0px;

其中 margin 属性对 IE 有效， padding 属性对 FireFox 有效

23. CSS 透明

IE ： filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。

FF ： opacity:0.6 。

24. 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; 。

25. 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;

26. 对select 的options 集合操作

枚举元素除了[] 外，SelectName.options.item() 也是可以的, 另外SelectName.options.length, SelectName.options.add/remove 都可以在两种浏览器上使用。注意在add 后赋值元素，否则会失败（本人试验如此）。

27. XMLHTTP 的区别

//mf

if (window.XMLHttpRequest) //mf

{

xmlhttp=new XMLHttpRequest()

xmlhttp.onreadystatechange=xmlhttpChange

xmlhttp.open("GET",url,true)

xmlhttp.send(null)

}

//ie

else if (window.ActiveXObject) // code for IE

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

if (xmlhttp)

{

xmlhttp.onreadystatechange=xmlhttpChange

xmlhttp.open("GET",url,true)

xmlhttp.send()

}

28. window.close()的区别

有的Firefox版本不支持window.close()方法，需要进行设置才可以。

需要在about:config中打开

dom.allow_scripts_to_close_windows;true

才行，我的Firefox版本是Firefox 3.0.4

Firefox与IE的一些Javascript编程小技巧

热门文章

最新文章

相关课程

相关电子书

相关实验场景