ie和firfox的兼容

 

通过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" 才行

 

http://wayfoon.iteye.com/blog/184409

1.firefox不支持对象加事件的函数名，如：以下代码在IE中能正常显示，但在firefox中则不能;
function.window.onload(){
    alert("onload");
}

改为用：
window.onload = fnShow;
function fnShow(){
    alert("onload");
}

或直接写为：
window.onload = function (){
    alert("onload");
}
//-------

2.flash,要设置embed的src属性才能正常显示;如：<embed src="../images/easewe.swf";
  但在IE中要设置param name="src"的value值才能显示；如：<PARAM NAME="Src" VALUE="./images/easewe.swf"">
--------
所以flash要同时设置这两个属性;

3.制作细线表格：
    在IE中可以用bordercolordark="网页背景色"，使得表格看起来很细；
    但在firefox中不起作用；需给表格增加样式：style="border-collapse:collapse;";
    所以要在ie和firefox中都显示细表格，则应该给表格加上样式style="border-collapse:collapse;";

4.在IE中11px和12px显示的大小是一样的，但在firefox中11px会比12px小，导致字在firefox中比ie中小；
  所以都需设置12px;

5.集合类对象问题
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

6.自定义属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

7.event.x与event.y问题
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

8.event.srcElement问题
IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

9.window.location.href问题

IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

10.访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

11.window.event问题

window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>

下面还有个通用的得到event的方法
function getEvent() //同时兼容ie和ff的写法
{  
    if(document.all)   return window.event;    
    func=getEvent.caller;        
    while(func!=null){  
        var arg0=func.arguments[0];
        if(arg0)
        {
          if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
          {  
          return arg0;
          }
        }
        func=func.caller;
    }
    return null;
}
到别的方法去直接调用就好了
function move()
{
    var evt=getEvent();
    ......      
}