JavaScript遇到瀏覽器不兼容與解決方案

JavaScript
    1. HTML對象獲取問題
      說明：FireFox：document.getElementById("idName");
           ie:document.idname或者document.getElementById("idName").
      解決辦法：統一使用document.getElementById("idName");
    2. const問題
      說明:Firefox下,可使用const關鍵字或var關鍵字來定義常量;
          IE下,只能使用var關鍵字來定義常量.
      解決方法： 統一使用var關鍵字來定義常量.
    3. event.x與event.y問題
      說明:IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;
           Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.
      解決方法：使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.
    4. window.location.href問題
      說明:IE或者Firefox2.0.x下,可使用window.location或window.location.href;
        Firefox1.5.x下,只能使用window.location.
      解決方法：使用window.location來代替window.location.href.
    5. frame問題
      如下面的frame爲例：
      <frame src="xxx.html" id="frameId" name="frameName" />
      (1)訪問frame對象:
        IE:使用window.frameId或者window.frameName來訪問這個frame對象.   frameId和frameName能夠同名。
        Firefox:只能使用window.frameName來訪問這個frame對象.
       在IE和Firefox中均可以使用window.document.getElementById("frameId")來訪問這個frame對象.
      (2)切換frame內容:
        在 IE和Firefox中均可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.
        若是須要將frame中的參數傳回父窗口(注意不是opener,而是parent   frame)，能夠在frame中使用parent來訪問父窗口。例如：parent.document.form1.filename.value = "Aqing";
    6. 模態和非模態窗口問題
      說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
      解決方法：直接使用window.open(pageURL,name,parameters)方式打開新窗口。
      若是須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口.
        例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value   =  "Aqing";
    7. firefox與IE的父元素(parentElement)的區別
      說明：IE：obj.parentElement
           firefox：obj.parentNode
      解決方法:   由於firefox與IE都支持DOM,所以使用obj.parentNode是不錯選擇.
    8. document.formName.item(」itemName」) 問題
      說明：IE下，可使用 document.formName.item(」itemName」) 或 document.formName.elements ["elementName"]；
          Firefox 下，只能使用document.formName.elements["elementName"]。
      解決方法：統一使用document.formName.elements["elementName"]。
    9. 集合類對象問題
     說明：IE下，可使用 () 或 [] 獲取集合類對象；
          Firefox下，只能使用 [ ]獲取集合類對象。
       解決方法：統一使用 [] 獲取集合類對象。
    10. 自定義屬性問題
      說明：IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；
           Firefox下，只能使用 getAttribute() 獲取自定義屬性。
      解決方法：統一經過 getAttribute() 獲取自定義屬性。
    11. input.type屬性問題
      說明：IE下 input.type 屬性爲只讀；
           Firefox下 input.type 屬性爲讀寫。
       解決辦法：不修改 input.type 屬性。若是必需要修改，能夠先隱藏原來的input，而後在一樣的位置再插入一個新的input元素。
    12. event.srcElement問題
      說明：IE下，even對象有srcElement屬性，可是沒有target屬性；
           Firefox下，even對象有target屬性，可是沒有srcElement屬性。
      解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
      若是考慮第8條問題，就改用myEvent代替event便可。
    13. body載入問題
      說明：Firefox的body對象在body標籤沒有被瀏覽器徹底讀入以前就存在；
           IE的body對象則必須在body標籤被瀏覽器徹底讀入以後才存在。
      [注] 這個問題還沒有實際驗證，待驗證後再來修改。
      [注] 經驗證，IE六、Opera9以及FireFox2中不存在上述問題，單純的JS腳本能夠訪問在腳本以前已經載入的全部對象和元素，即便這個元素尚未載入完成。
    14. 事件委託方法
      說明：IE下，使用 document.body.onload = inject; 其中function inject()在這以前已被實現；
           Firefox下，使用 document.body.onload = inject();
      解決方法：統一使用 document.body.onload=new Function(’inject()’); 或者 document.body.onload = function(){/* 這裏是代碼 */}
      [注意] Function和function的區別。
    15. Table操做問題
      說明：ie、firefox以及其它瀏覽器對於 table 標籤的操做都各不相同，在ie中不容許對table和tr的innerHTML賦值，使用js增長一個tr時，使用appendChild方法也無論用。
      解決方法：//向table追加一個空行：
var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);
      [注] 建議使用JS框架集來操做table，如JQuery。
    16. 對象寬高賦值問題
      說明：FireFox中相似 obj.style.height = imgObj.height 的語句無效。