IE下JavaScript遷移到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下都有效.
      
       在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" 才行