IE和Firefox下编写Javascript的区别

你对IE和Firefox下编写Javascript的区别是否了解，这里和大家简单分享一下，相信本文介绍一定会让你有所收获。

我们拥有十多年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供网站设计、成都网站制作、微信开发、成都微信小程序、手机网站开发、HTML5、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

IE和Firefox下编写Javascript的区别

除了css以外,IE和FF对Javascript写法有时也不同，也是让人头痛的问题，下面介绍些常用的区别。其中IE代替InternetExplorer，以MF代替MozzilaFirefox。

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

 
 
 

  
  
  
 
  
  
  
...  
  
  
  
 
  
  
  
functiongotoSubmit(){  
  
  
  
...  
  
  
  
alert(window.event);//usewindow.event  
  
  
  
...  
  
  
  
}  
  
  
  
 script> 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
...  
  
  
  
 
  
  
  
functiongotoSubmit(evt){  
  
  
  
evtevt=evt?evt:(window.event?window.event:null);  
  
  
  
...  
  
  
  
alert(evt);//useevt  
  
  
  
...  
  
  
  
}  
  
  
  
 script> 
 
 
 

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

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.pageXIE中没有。
故采用event.clIEntX代替event.x。在IE中也有这个变量。
event.clIEntX与event.pageX有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

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

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

另外，在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/Javascript/test_frame/目录下面的测试
----adun2004.12.09修改

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

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

 
 
 

  
  
  
 
  
  
  
 
 
 table> 
 form> 
 
MF中input.parentNode的值为form,而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)
11.const问题
(1)现有问题:
 在IE中不能使用const关键字。如constconstVar=32;在IE中这是语法错误。
 (2)解决方法:
 不使用const，以var代替。
12.body对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在。#p#
13.urlencoding
在Javascript中如果书写url就直接写&不要写&例如varurl='xx.Javascriptp?objectName=xx&objectEvent=xxx';
 frm.action=url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
 一般会服务器报错参数没有找到
 当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
 一般MF无法识别Javascript中的&
 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元素（是否还有其它不能取的元素还不知道）。
1,document.getElementById替代document.all（IE适用）
 2,集合[]替代()（IE适用）
 3,target替代srcElement;parentNode替代parentElement（parentNodeIE适用）
 4,node.parentNode.removeChild(node)替代removeNode(this)（IE适用）
 5,有空白文本节点
 6,无outerHTML属性
 7,事件局部变量e替代事件全局变量event
 8,e.button键值有别于event.button,只有3个键值而无组合键值
 9,无ondrag事件
 10,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
 11,addEventListener替代attachEvent;removeEventListener替代detachEvent
 12,e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
 13,style.top、style.left等严格检查"px"单位（加"px"IE适用）
 14,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";无其它filter
 15,style.cursor="pointer"替代style.cursor="hand"（IE适用）
 16,title替代alt（IE适用）
 17,状态栏默认不可修改,需调整FF设置
 18,内置绘图功能以canvas或者SVG替代vml
 19,代码出错时经常不报错（想来也是FF的无奈之举吧,如果每个IE独有的表达方式换在它里面都报错的话,怕是报都报不过来吧）
 20,对缓存的清理非常不好
 注:标明“IE适用”者为通用性建议写法,未标明者在IE里不适用。#p#
以下所有IE指IE6.0
验证是否是IE浏览器(来之于googleJavascript)
varagt=navigator.userAgent.toLowerCase();
 varis_IE=(agt.indexOf("msIE")!=-1&&document.all);
 正式开始                                                    
◆事件委托方法
IE
document.body.onload=inject;//Functioninject()在这之前已被实现
Firefox
document.body.onload=inject();
有人说标准是：
document.body.onload=newFunction('inject()');
在Firefox无法取得event.srcElement
◆通过其他方式传递对象 
 
 
 

  
  
  
if(isIE)  
  
  
  
thistable.attachEvent("onmousedown",OnClickChangeTdBackColor);  
  
  
  
//thistable.onmousedown=OnClickChangeTdBackColor;  
  
  
  
else//dealFirefox  
  
  
  
{  
  
  
  
 
  
  
  
 
  
  
  
for(vari=0;i
  
  
  
{  
  
  
  
varrowObj=thistable.rows[i];  
  
  
  
for(varj=0;j
  
  
  
{  
  
  
  
varcellObj=rowObj.cells[j];  
  
  
  
cellObj.setAttribute("onmousedown","OnClickChangeTdBackColor(this)");  
  
  
  
}  
  
  
  
//alert(rowObj.cells[0].tagName);  
  
  
  
}  
  
  
  
}  
  
  
  
 
 
 
 
 ◆在Firefox下编写事件处理函数
因为Firefox并没有window.event.如果要得到event对象,就必须要声明时间处理函数的第一个参数为event.
所以为了兼容IE与Firefox,一般的事件处理方法为:
  
 
 
 

  
  
  
btn.onclick=handle_btn_click;  
  
  
  
functionhandle_btn_click(evt)  
  
  
  
{  
  
  
  
if(evt==null)evt=window.event;//IE  
  
  
  
//处理事件.  
  
  
  
}  
  
  
  
 
 
 
 
对于简单的程序,这不算麻烦.
但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦.#p#
◆下面介绍一个解决这个麻烦事的方法,与原理.
Javascriptcript中，函数的调用是有一个func.caller这个属性的.
 例如 
 
 
 

  
  
  
functionA()  
  
  
  
{  
  
  
  
B();  
  
  
  
}  
  
  
  
functionB()  
  
  
  
{  
  
  
  
alert(B.caller);  
  
  
  
}  
  
  
  
 
 
 
 
如果B被A调用,那么B.caller就是A
◆另外,函数有一个arguments属性.这个属性可以遍历函数当前执行的参数:
  
 
 
 

  
  
  
functionmyalert()  
  
  
  
{  
  
  
  
vararr=[];  
  
  
  
for(vari=0;i  
  
  
  
arr[i]=myalert.arguments[i];  
  
  
  
alert(arr.join("-"));  
  
  
  
}  
  
  
  
alert("hello","world",1,2,3)  
  
  
  
 
 
 
 
就能显示hello-world-1-2-3
 (arguments的个数与调用方有关,而与函数的参数定义没有任何关系)
根据这两个属性,我们可以得到第一个函数的event对象:
 
 
 

  
  
  
btn.onclick=handle_click;  
  
  
  
functionhandle_click()  
  
  
  
{  
  
  
  
showcontent();  
  
  
  
}  
  
  
  
functionshowcontent()  
  
  
  
{  
  
  
  
varevt=SearchEvent();  
  
  
  
if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下  
  
  
  
window.open(global_helpurl);  
  
  
  
else  
  
  
  
location.href=global_helpurl;  
  
  
  
}  
  
  
  
functionSearchEvent()  
  
  
  
{  
  
  
  
func=SearchEvent.caller;  
  
  
  
while(func!=null)  
  
  
  
{  
  
  
  
vararg0=func.arguments[0];  
  
  
  
if(arg0)  
  
  
  
{  
  
  
  
if(arg0.constructor==Event)//如果就是event对象  
  
  
  
returnarg0;  
  
  
  
}  
  
  
  
funcfunc=func.caller;  
  
  
  
}  
  
  
  
returnnull;  
  
  
  
}  
  
  
  
 
 
 
 
这个例子使用了SearchEvent来搜索event对象.其中'Event'是Firefox的event.constructor.
 在该例子运行时,
 SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以func=func.caller时,func变为handle_click.
 handle_click被Firefox调用,虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event!
针对上面的知识,我们可以结合prototype.__defineGetter__来实现window.event在Firefox下的实现:#p#
◆下面给出一个简单的代码..有兴趣的可以补充 
 
 
 

  
  
  
if(window.addEventListener)  
  
  
  
{  
  
  
  
FixPrototypeForGecko();  
  
  
  
}  
  
  
  
functionFixPrototypeForGecko()  
  
  
  
{  
  
  
  
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);  
  
  
  
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);  
  
  
  
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);  
  
  
  
}  
  
  
  
functionelement_prototype_get_runtimeStyle()  
  
  
  
{  
  
  
  
//returnstyleinstead...  
  
  
  
returnthis.style;  
  
  
  
}  
  
  
  
functionwindow_prototype_get_event()  
  
  
  
{  
  
  
  
returnSearchEvent();  
  
  
  
}  
  
  
  
functionevent_prototype_get_srcElement()  
  
  
  
{  
  
  
  
returnthis.target;  
  
  
  
}  
  
  
  
 
  
  
  
functionSearchEvent()  
  
  
  
{  
  
  
  
//IE  
  
  
  
if(document.all)  
  
  
  
returnwindow.event;  
  
  
  
 
  
  
  
func=SearchEvent.caller;  
  
  
  
while(func!=null)  
  
  
  
{  
  
  
  
vararg0=func.arguments[0];  
  
  
  
if(arg0)  
  
  
  
{  
  
  
  
if(arg0.constructor==Event)  
  
  
  
returnarg0;  
  
  
  
}  
  
  
  
funcfunc=func.caller;  
  
  
  
}  
  
  
  
returnnull;  
  
  
  
}  
  
  
  
 body> html> 
  
  
  
 
 
 
 
 ◆Firefox与IE(parentElement)的父元素的区别
因为Firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
IE
 obj.parentElement
 Firefox
 obj.parentNode
◆asp.net中UniqueID和clIEntID的区别
要使用document.getElementById方法，则使用控件的时候要这样来作
"javascript:OnSelectSubCatalog(\""+subCatalog_drp.ClIEntID+"\","+catalogIDX+","+catID.ToString()+")";
◆调用Select元素的区别
移出一个选择项
IE：sel.options.remove(sel.selectedIndex);
 Firefox：
增加选择项：
IE:subCatalog.add(newOption(text,value));
Firefox:
  
 
 
 

  
  
  
varopnObj=document.createElement("OPTION");  
  
  
  
//opnObj.id=optionID;  
  
  
  
opnObj.value=value;  
  
  
  
opnObj.text=text;  
  
  
  
subCatalog.appendChild(opnObj);  
  
  
  
 
 
 
 
cursor:handVScursor:pointer
Firefox不支持hand，但IE支持pointer，所以建议统一使用pointer。
文章来源:Div-Css.net设计网参考:http://www.div-css.net/div_css/topic/index.asp?id=7163
【编辑推荐】

探究IE和Firefox在JavaScript方面的兼容性
IE7和IE8的CSS样式八大差异
探究IE和Firefox下的2款HTTP调试工具用法
Firefox和IE浏览器清除缓存方法揭秘
实现IE6、IE7、IE8多版本浏览器共存的五种方法

                网页题目：IE和Firefox下编写Javascript的区别
                

                本文路径：http://www.hantingmc.com/qtweb/news33/273483.html
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                

                广告
                
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            

            
猜你还喜欢下面的内容
            

                

                        我们能否创造出稳定空间,稳定空间的概念与建构
                    

                        如何设置万网的域名和主机之间的绑定？万网创建域名服务器
                    

                        Canva服务器宕机，临时失去服务能力(canva服务器)
                    

                        如何快速有效地实现百万数据库优化(百万数据库优化)
                    

                        探索Linux早期版本的演变历程(linux早期版本)
                    

                        视频直播云新趋势打造终端+云端一体化
                    

                        阿里云盘会员有什么用-非会员、会员和超级会员权益对比
                    

                        TF卡是什么东西
                    

                        Linux系统上网问题解决方案（linux是否可以上网）
                    
                            
        

        

            
响应式网站知识
            

                

                        连接远程桌面无法连接三个原因？（远程桌面登录不上-云服务器问题）
                    

                        ftp服务器与web服务器
                    

                        html如何设置所有字体颜色
                    

                        python贪吃蛇游戏代码怎么写
                    

                        EMCSymmetrixV-MAX创新亮点解析
                    

                        为什么连着耳机就没有网
                    

                        ubuntu设置IP地址的命令
                    

                        利用Kettle快速操作Redis（redis用kettle）
                    

                        获取系统的C#鼠标指针相关代码解析
                    

                        网页管理界面怎么进入？(怎么打开网站管理平台权限)
                    

                        虚拟机比容器更安全？
                    

                        简化运维Redis运维框架（redis运维框架）
                    

                        windows7怎么安装原神？（windows7系统安装包下载）
                    

                        安装Deb文件：从Linux快捷操作（linux安装软件deb）
                    

                        name域名官网(namecheap哪个国家的？)
                    
            
        
        

            
分类信息网站
            

                

                        白乌鱼
                    

                        封阳台
                    

                        混凝土搅拌罐车
                    

                        玻璃钢坐凳
                    

                        水处理设备
                    

                        航空箱
                    

                        水电改造
                    

                        石凉亭
                    

                        公路钻孔机
                    

                        办公窗帘
                    

                        LED显示屏
                    

                        木托盘
                    

                        湿喷机
                    

                        会所设计
                    

                        房屋鉴定
                    

                        石牌坊
                    
            
        
    

    

        合江网站建设　　 　亮美家　　 　微博营销　　 　成都微信小程序开发　　 　达州做网站　　 　古巴雪茄　　 　成都网站建设　　 　娃娃鱼鱼苗　　 　成都广告公司　　 　网站制作　　 　h5页面制作　　 　卡多尼人工智　　 　成都网页制作　　 　顺泽窗帘　　 　成都网站建设　　 　关键词优化　　 　成都建站　　 　益鑫餐饮　　 　成都响应式网站建设　　 　成都光华机房