IE下JavaScript迁移到FireFox下的工作笔记

 IE下JavaScript迁移到FireFox下的工作笔记  
<script src="http://blog.csdn.net/count.aspx?ID=1179654&Type=Rank"></script>
  

     ======================================================================   
     一些参考资料
     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下都有效.
　　
　　在ff下按Ctrl+shift+del, 打开清除私有信息对话框, 点击立即清除, 回到页面后reload一次也是可行的方案.
　　
　　
　　
　　☆ IE -> firefox javascript类
　　△ 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
　　△ 获得form里某个元素的方法
　　formObj.elements['user_ 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 = ""
　　
　　
　　
　　△ 不支持onpropertychange事件
　　
　　△ obj.insertAdjacentElement("beforeBegin",objText);
　　改为用
　　obj.parentNode.insertBefore(objText,obj);
　　
　　△ createElement不支持HTML代码
　　用document.write(esHTML); 可以解决一部分情况
　　
　　△ innerText -> textContent
　　
　　△ 对象名称中的$不能识别, 建议改为_
　　objName = "t1$spin"
　　改为
　　objName = "t1_spin"
　　
　　△ 事件名称和注册方式的变化
　　addEventListener("blur", myBlur, false);
　　
　　
　　△ FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
　　objText.setAttribute("dropdown_select",obj);
　　alert(obj.id) //正确的名字
　　obj = objText.getAttribute("dropdown_select");
　　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才行
　　
　　获取时:
　　document.getElementByID("TD1").isOBJ 总返回 undefined, IE下是可以的
　　应该用:
　　document.getElementByID("TD1").getAttribute("isOBJ")
　　
　　
　　△ FF里select控件不再是:总是在顶端显示
　　所以需要设置控件的zIndex
　　
　　△ 对于if ( vars == undefined ) 下面的值用于判断是等同的
　　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机制使用起来更简洁一些
　　
　　这种模式是桥梁模式还是
　　
　　
　　△ 会被firefox解释为提交form或者刷新页面???
　　需要写标准
　　
　　△ 在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不能用
　　
　　△ onpropertychange -> oninput
　　
　　△ 判断函数或者变量是否存在
　　IE: if (funcName) funcName();
　　if (varName == undefined) varName=1;
　　
　　FF: if (window.funcName) funcName();
　　if (window.varName == undefined) varName=1;
　　
　　即前面要加 window.
　　
　　☆ 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" 才行
　　
　　Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1179654

本文转自
http://blog.csdn.net/jxc/archive/2006/09/14/1179654.aspx