引用 js在IE与FF之间的区别详细解析


Posted in Javascript onNovember 20, 2013

js调试工具推荐firefox的firebug插件

能够给js设置断点执行

能够运行时修改css样式

查看dom模型等

☆IE8自带的developerbar也很不错

☆打开firefox所有js警告:
在地址栏里录入:about:config
双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错

☆IE->firefoxjavascript类

△document.all("id")->document.getElementById("id")
并且控件尽量用id,而不是name标识

提示:
如果控件只有name,没有id,用getElementById时:
IE:也可以找到对象
FF:返回NULL

△获得form里某个元素的方法
elForm.elements['name'];

△取集合元素时,ie支持[],()2种写法,但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0]

△判断对象是否是object的方法应该为
if(typeof对象变量=="object")
而不是if(对象变量=="[object]")

△eval(对象名称)->document.getElementById
FF支持eval函数

△通过id直接调用对象
对象id.value=""
改为
document.getElementById("name").value=""

△obj.insertAdjacentElement("beforeBegin",objText);

改为用
obj.parentNode.insertBefore(objText,obj);

△FF的createElement不支持HTML代码

用document.write(esHTML);

或者创建元素后再设置属性,对input元素来说,需要先设置type再加入到dom里
varobj=createElement("input");
obj.type="checkbox";

varobj2=document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);

如果是直接插入html代码,则可以考虑用
createContextualFragment

△innerText->textContent

△对象名称中的$不能识别,建议改为_
objName="t1$spin"
改为
objName="t1_spin"

△FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("obj",obj);

alert(obj.id)//正确的名字
obj=objText.getAttribute("obj");
alert(obj.id)//null

在IE下没有问题,FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的toString()方法了

解决的方法是用下面的调用方式:
objText.dropdown_select=obj;
obj=objText.dropdown_select

△className->class
FF下用class代替IE下的className
由于class是关键字,所以需要用setAttribute/getAttribute才行
setAttribute("class","css样式名称");

△在html里定义的属性,必须用getAttribute才行
<tdid="TD1"isOBJ="true">

获取时:
document.getElementByID("TD1").isOBJ总返回undefined,IE下是可以的

应该用:
document.getElementByID("TD1").getAttribute("isOBJ")

△FF里select控件不再是:总是在顶端显示
所以可能需要设置控件的zIndex
IE里覆盖select控件的方法是,用ifame

△对于if(vars==undefined)下面的值用于判断是等同的
undefined
null
false
0

△如果FF调用obj.focus();报错,请尝试改为:
window.setTimeout(function(){obj.focus();},20);

△FF下,keyCode是只读的,那把回车转换为tab怎么办?在录入时进行键值转换怎么办??

变通的方法是:
1.回车跳转->自己写跳转处理代码.
遍历dom里所有的元素,找到当前元素的下一个能够设置焦点的元素,给其设置焦点

2.在能够录入的控件里,
把选中的部分替换为新录入的内容:vartext=String.fromCharCode(event.keyCode);
同时阻止按键事件上传,调用:event.preventDefault()

△<button>会被firefox解释为提交form或者刷新页面???
需要写标准<buttontype="button">
或者在onclick="原函数调用();returnfalse;"

△在firefox里,document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?

△children->childNodes

△sytle.pixelHeight->style.height

△判断函数或者变量是否存在
if(!("varName"inwindow))varVarName=1;

△document.body.clientWidth

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN">

如果html包含上面的语句,则应该用下面的方法获取
document.documentElement.clientWidth

△window.createPopup

FF不支持

△document.body.onresize

FF不支持

用window.onresize

注意,页面打开时并不会触发onresize事件?需要在onload里也调用一次才行

△box模型的问题

IE下默认的是content-box为了统一,可用设置:

div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

也可用在文档头加入:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

但是对IE旧代码影响较大

△注册事件

IE:attachEvent

FF:addEventListener("blur",myBlur,false);

第1个参数事件名称不需要带"on"

第3个参数false代表事件传递从事件对象沿dom树往body方向传

△触发事件

IE:obj.fireEvent("onclick");

FF:

vare=document.createEvent("Events");

e.initEvent("click",true,false);

element.dispatchEvent(event)

△在事件处理函数中获得对象句柄

varoThis=this;

obj.onfocus=function(evt){

oThis.doOnFocus(evt);

}

△统一事件处理框架代码

doOnFocus(evt){

evt=evt||window.event;

varel=evt.target||evt.srcElement;

//后续处理

}

△FF不支持onpropertychange事件

但是FF里可以定义属性的setter方法,如下面的:

HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){

//构造虚拟的event对象

varevt=[];

evt["target"]=this;

evt["propertyName"]='readOnly'

//onpropertychange函数需要定义evt参数,参考统一事件处理框架代码

if(this.onpropertychange)this.onpropertychange(evt);

});

☆IE->firefoxcss类

△cursor:hand->cursor:pointer

△expressionfirefox不支持

在IE下expression也非常消耗CPU,所以不应该使用!!

为了达到较好的效果,应该建立自己的expressiontojavascript的处理函数

这样在IE和FF里就都能用了.

△FILTERfirefox不支持

filter:Alpha(Opacity=50);

替换为

-moz-opacity:0.5;

△text-overflow

不支持

△transparent

firefox下obj.setAttribute("bgColor","#ffffff")只支持颜色

必须用obj.style.backgroundColor="transparent"才行

△FF下text控件高度与IE不同,统一一下

input[type=text]{

height:20px;

}

注意input与[之间不能有空格!

△font在IE里不能对body和td等起作用,FF可以

统一用font-family

Javascript 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 #Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
You might like
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python如何生成网页验证码
2018/07/28 Python
Django 请求Request的具体使用方法
2019/11/11 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
Vrbo英国:预订度假屋
2020/08/19 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
美容院合作经营协议书
2014/10/10 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
复兴之路观后感
2015/06/02 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
tomcat下部署jenkins的方法
2022/05/06 Servers