bluestar0688 的 js在IE和FF的区别
js调试工具推荐 firefox 的 firebug 插件
能够给js设置断点执行
能够运行时修改css样式
查看dom模型等
☆ IE8 自带的developer bar也很不错
☆ 打开firefox所有js警告:
在地址栏里录入:about:config
双击,设置 javascript option restict 打开为true 能够看到很多警告,利于纠错
☆ IE -> firefox javascript类
△ 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里
var obj = createElement("input");
obj.type = "checkbox";
var obj2 = 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才行
<td id="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. 在能够录入的控件里,
把选中的部分替换为新录入的内容: var text = String.fromCharCode(event.keyCode);
同时阻止按键事件上传, 调用: event.preventDefault()
△ <button> 会被firefox解释为提交form或者刷新页面???
需要写标准<button type="button">
或者在onclick="原函数调用(); return false;"
△ 在firefox里, document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△ children -> childNodes
△ sytle.pixelHeight -> style.height
△ 判断函数或者变量是否存在
if (!("varName" in window)) var VarName = 1;
△ document.body.clientWidth
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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;}
也可用在文档头加入:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./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:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)
△ 在事件处理函数中获得对象句柄
var oThis = this;
obj.onfocus = function(evt){
oThis.doOnFocus(evt);
}
△ 统一事件处理框架代码
doOnFocus(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
// 后续处理
}
△ FF不支持onpropertychange事件
但是FF里可以定义属性的setter方法, 如下面的:
HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
// 构造虚拟的event对象
var evt = [];
evt["target"] = this;
evt["propertyName"] = 'readOnly'
//onpropertychange函数需要定义evt参数, 参考统一事件处理框架代码
if (this.onpropertychange) this.onpropertychange(evt);
});
☆ IE -> firefox css类
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不应该使用!!
为了达到较好的效果,应该建立自己的expression to javascript的处理函数
这样在IE和FF里就都能用了.
△ FILTER firefox不支持
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
