IE下JavaScript迁移到FireFox下的工作笔记[转]
[原文]http://blog.csdn.net/jxc/archive/2006/09/14/1179654.aspx
些参考资料
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
通过firefox自带的工具学习的方法:
打开TOOLS -> dom inspector , 左侧选中某个控件后, 右侧可以选择 JAVASCRIPT OBJECT
通过自带工具调试javascript
TOOLS -> JavaScript Console
打开所有js警告:
在地址栏里录入:about:config
双击,设置 javascript option restict 打开为true 能够看到很多警告,利于纠错
☆ 关于调试JS的tip
调试js时,经常受缓存的影响,页面不会加载最新的代码,为此解决如下:
在新页面里打开原来的地址,关闭原来的页面,ok了.
以上方法在IE和FF下都有效.
☆ IE -> firefox js类
△ document.all -> document.getElementById
并且控件尽量用id,而不是name标识
为了兼容旧代码,参考下面的函数, 把document.all 替换为 document_all即可
function document_all(objName,doc){
if (!doc) doc = document;
var obj;
obj = doc.getElementById(objName);
if (!obj) obj = doc.getElementsByName(objName)[0];
return obj;
}
提示:
如果控件只有name,没有id, 用getElementById时:
IE:也可以找到对象
FF:返回NULL
△ 判断对象是否是object的方法应该为
if( typeof 对象变量 == "object")
而不是 if(对象变量 == "[object]")
△ eval(对象名称) -> document.getElementById
FF支持eval函数
△ 通过id直接调用对象
name.value = ""
改为
document.getElementById("name").value = ""
△ window.event 的改造, firefox和opera会在调用函数时传入event对象,
ie用全局对象window.event,可以修改事件处理函数,接收event对象
function editmask_keydown(event){
event = event || window.event;
这样定义对系统改动比较大, 所以从底层转换处理,可能更好一些
参考 ie_to_w3c.js
△
mX = event.x ? event.x : event.pageX;
△ 不支持onpropertychange事件
△ obj.insertAdjacentElement("beforeBegin",objText);
改为用
obj.parentNode.insertBefore(objText,obj);
△ createElement不支持HTML代码
用document.write(esHTML); 可以解决一部分情况
△ innerText -> textContent
△ 对象名称中的$改为_
objName = "t1$spin"
改为
objName = "t1_spin"
△ 事件名称和注册方式的变化
this.selYear.addEventListener("blur", myBlur, false);
△ FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("dropdown_select",obj);
alert(obj.id) //正确的名字
var objxx = objText.getAttribute("dropdown_select");
alert(objxx.id) //null
在IE下没有问题, FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的 toString() 方法了
解决的方法是用下面的调用方式:
objText.dropdown_select = obj;
obj = objText.dropdown_select
但是有资料说对用户自定义的属性,必须用setAttribute, 看来什么都要实践证实一下!
为了区分系统的属性和用户自定义的属性, 是否在命名上做点研究?
obj.custom_dropdown_select
△ className -> class
FF下用class代替IE下的className
由于class是关键字, 所以需要用 setAttribute/getAttribute才行
△ 在html里定义的属性,必须用getAttribute才行
<td id="TD1" isOBJ="true">
获取时:
document.getElementByID("TD1").isOBJ 总返回 undefined
应该用:
document.getElementByID("TD1").getAttribute("isOBJ")
△ FF里select控件不再是:总是在顶端显示
所以需要设置控件的zIndex
△ 对于if ( vars ) 下面的值用于判断是等同的
undefined
null
false
0
△ 如果FF调用obj.focus(); 报错,请尝试改为:
window.setTimeout( function(){ obj.focus(); }, 0);
现在的方案是在失去焦点前判断
△ 关于在控件的blur事件里判断下一个获得焦点的控件的tip, 类似于Powerbuilder的item focus changing事件
用途举例: 对dropdown控件里的text控件,
如果下一个获得焦点的对象是selection,则不做录入控制,如果不是,则提示,并设置焦点为text
经测试:
IE: blur发生在focus后
FF: blur发生在focus前调用
IE: 在onbeforedeactivate事件里用activeElement可以获得下一个对象
FF: blur事件发生在focus前面,而FF又没有中间事件
下面的都不行!
target
currentTarget
relativeTarget
看来需要这样处理!
注册所有控件的onblur,设置lastElement
在focus里处理上一个? 也不行啊!
能否模拟自己的itemfocuschanging事件?
IE: onbeforedeactivate
FF: 抢先注册onfocus和onblur, 在里面设置activeElement
在onfocus里设置activeElement后,
调用onbeforedeactivate
如果onbeforedeactivate返回false,则设置focus为原来的控件!
在控件失去焦点前,设置lastObj=this
在控件获得焦点时,先判断lastObj是什么
△ FF不能处理alert造成的死循环情况
△ FF下,keyCode是只读的, 那把回车转换为tab怎么办? 在录入时进行转换怎么办??
变通的方法是:
1. 回车跳转 -> 自己写跳转处理代码.
2. 在能够录入的控件里,
把选中的部分替换为新录入的内容: var text = String.fromCharCode(event.keyCode);
同时阻止按键事件上传, 调用: event.preventDefault()
△ selection的难度较大,因为IE和FF没有接近的函数
为此专门做了一个对象来消除差异
感觉firefox的selection机制使用起来更简洁一些
这种模式是桥梁模式还是
△ <button> 会被firefox解释为提交form或者刷新页面???
需要写标准<button type="button">
△ 在firefox里, document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△ children -> childNode()
△ sytle.pixelHeight -> style.height
△ obj.attachEvent("onfocus", editmask_focus);
obj.onfocus = editmask_focus;
上面2句竟然有区别!
如果用 attachEvent, 就不能用 this 关键字了!
通用的做法是不用this, 而是用 event.srcElement
△ fireevent不能用
☆ IE -> firefox css类
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不应该使用!!
为了达到较好的效果,应该建立自己的expression to javascript的处理函数
这样在IE和FF里就都能用了.
△ FILTER firefox不支持
些参考资料
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
通过firefox自带的工具学习的方法:
打开TOOLS -> dom inspector , 左侧选中某个控件后, 右侧可以选择 JAVASCRIPT OBJECT
通过自带工具调试javascript
TOOLS -> JavaScript Console
打开所有js警告:
在地址栏里录入:about:config
双击,设置 javascript option restict 打开为true 能够看到很多警告,利于纠错
☆ 关于调试JS的tip
调试js时,经常受缓存的影响,页面不会加载最新的代码,为此解决如下:
在新页面里打开原来的地址,关闭原来的页面,ok了.
以上方法在IE和FF下都有效.
☆ IE -> firefox js类
△ document.all -> document.getElementById
并且控件尽量用id,而不是name标识
为了兼容旧代码,参考下面的函数, 把document.all 替换为 document_all即可
function document_all(objName,doc){
if (!doc) doc = document;
var obj;
obj = doc.getElementById(objName);
if (!obj) obj = doc.getElementsByName(objName)[0];
return obj;
}
提示:
如果控件只有name,没有id, 用getElementById时:
IE:也可以找到对象
FF:返回NULL
△ 判断对象是否是object的方法应该为
if( typeof 对象变量 == "object")
而不是 if(对象变量 == "[object]")
△ eval(对象名称) -> document.getElementById
FF支持eval函数
△ 通过id直接调用对象
name.value = ""
改为
document.getElementById("name").value = ""
△ window.event 的改造, firefox和opera会在调用函数时传入event对象,
ie用全局对象window.event,可以修改事件处理函数,接收event对象
function editmask_keydown(event){
event = event || window.event;
这样定义对系统改动比较大, 所以从底层转换处理,可能更好一些
参考 ie_to_w3c.js
△
mX = event.x ? event.x : event.pageX;
△ 不支持onpropertychange事件
△ obj.insertAdjacentElement("beforeBegin",objText);
改为用
obj.parentNode.insertBefore(objText,obj);
△ createElement不支持HTML代码
用document.write(esHTML); 可以解决一部分情况
△ innerText -> textContent
△ 对象名称中的$改为_
objName = "t1$spin"
改为
objName = "t1_spin"
△ 事件名称和注册方式的变化
this.selYear.addEventListener("blur", myBlur, false);
△ FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("dropdown_select",obj);
alert(obj.id) //正确的名字
var objxx = objText.getAttribute("dropdown_select");
alert(objxx.id) //null
在IE下没有问题, FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的 toString() 方法了
解决的方法是用下面的调用方式:
objText.dropdown_select = obj;
obj = objText.dropdown_select
但是有资料说对用户自定义的属性,必须用setAttribute, 看来什么都要实践证实一下!
为了区分系统的属性和用户自定义的属性, 是否在命名上做点研究?
obj.custom_dropdown_select
△ className -> class
FF下用class代替IE下的className
由于class是关键字, 所以需要用 setAttribute/getAttribute才行
△ 在html里定义的属性,必须用getAttribute才行
<td id="TD1" isOBJ="true">
获取时:
document.getElementByID("TD1").isOBJ 总返回 undefined
应该用:
document.getElementByID("TD1").getAttribute("isOBJ")
△ FF里select控件不再是:总是在顶端显示
所以需要设置控件的zIndex
△ 对于if ( vars ) 下面的值用于判断是等同的
undefined
null
false
0
△ 如果FF调用obj.focus(); 报错,请尝试改为:
window.setTimeout( function(){ obj.focus(); }, 0);
现在的方案是在失去焦点前判断
△ 关于在控件的blur事件里判断下一个获得焦点的控件的tip, 类似于Powerbuilder的item focus changing事件
用途举例: 对dropdown控件里的text控件,
如果下一个获得焦点的对象是selection,则不做录入控制,如果不是,则提示,并设置焦点为text
经测试:
IE: blur发生在focus后
FF: blur发生在focus前调用
IE: 在onbeforedeactivate事件里用activeElement可以获得下一个对象
FF: blur事件发生在focus前面,而FF又没有中间事件
下面的都不行!
target
currentTarget
relativeTarget
看来需要这样处理!
注册所有控件的onblur,设置lastElement
在focus里处理上一个? 也不行啊!
能否模拟自己的itemfocuschanging事件?
IE: onbeforedeactivate
FF: 抢先注册onfocus和onblur, 在里面设置activeElement
在onfocus里设置activeElement后,
调用onbeforedeactivate
如果onbeforedeactivate返回false,则设置focus为原来的控件!
在控件失去焦点前,设置lastObj=this
在控件获得焦点时,先判断lastObj是什么
△ FF不能处理alert造成的死循环情况
△ FF下,keyCode是只读的, 那把回车转换为tab怎么办? 在录入时进行转换怎么办??
变通的方法是:
1. 回车跳转 -> 自己写跳转处理代码.
2. 在能够录入的控件里,
把选中的部分替换为新录入的内容: var text = String.fromCharCode(event.keyCode);
同时阻止按键事件上传, 调用: event.preventDefault()
△ selection的难度较大,因为IE和FF没有接近的函数
为此专门做了一个对象来消除差异
感觉firefox的selection机制使用起来更简洁一些
这种模式是桥梁模式还是
△ <button> 会被firefox解释为提交form或者刷新页面???
需要写标准<button type="button">
△ 在firefox里, document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△ children -> childNode()
△ sytle.pixelHeight -> style.height
△ obj.attachEvent("onfocus", editmask_focus);
obj.onfocus = editmask_focus;
上面2句竟然有区别!
如果用 attachEvent, 就不能用 this 关键字了!
通用的做法是不用this, 而是用 event.srcElement
△ fireevent不能用
☆ IE -> firefox css类
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不应该使用!!
为了达到较好的效果,应该建立自己的expression to javascript的处理函数
这样在IE和FF里就都能用了.
△ FILTER firefox不支持
