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

    技术2022-05-11  66

    ======================================================================         一些参考资料      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才行                  <td id="TD1" isOBJ="true">                  获取时:                  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机制使用起来更简洁一些                                    这种模式是桥梁模式还是                                           △       <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不能用              △       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" 才行

     

    最新回复(0)