JavaScript的常見相容問題及相關解決方法(chrome/IE/firefox)

JavaScript的常見相容問題及相關解決方法(chrome/IE/firefox)_javascript技巧

WBOY

發布： 2016-05-16 17:05:57

原創

972 人瀏覽過

首先這裡聲明一下，關於我測試瀏覽器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester

下面的程式碼關於聲明

1：取得捲軸的情況

複製程式碼程式碼>

function getScroll(){

        var t, l, w, h;

            t = document.documentElement.scrollTop ;//滾動條的頂端
            l = document.documentElement.scrollLeft;//滾動條的左端
            w = document.documentElement.scrollWidth;//滾動條的寬度，也就是頁面的寬度
 h = document.documentElement.scrollHeight;//捲軸的高度
        }
        else                 l = document.身體.scrollLeft;
                w = document.body.scrollWidth;
            }
        return {
             🎜>            w: w,
            h: h
    ：取得視圖瀏覽器的寬度高度





複製程式碼


 程式碼如下:

function getPageWidth(){ > if (typeof pageWindth != "number") { if (document.compat th = document.documentElement.clientWidth;
} else {

pageWidth = document.body.clientWidth; } function getPageHeight(){ var pageHeight = window.innerHeight; if (typeof pageWindth != "number") { if (document.compatMode == "CSS1Compat") { }

一起 {

    = document.body.clientHeight;
            }
        }
   🎜>3：取得目前瀏覽器型號名字

複製程式碼

程式碼如下:

function(){
        var Sys = {};
        var ua = navigator.userAgent.LowerCase(LoweranCase(ovar);      (s = ua.match(/ msie ([d.] )/)) ? Sys.ie = s[1] : (s = ua.match(/firefox/([d.] )/)) ? Sys.firefox = s[1] : ( s = ua.match(/chrome/([d.] )/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([d.] )/)) ? Sys. opera = s[1] : (s = ua.match(/version/([d.] ).*safari/)) ? Sys.safari = s[1] : 0;

        if (Sys .ie != null) {
            return ("IE:"   Sys.ie);//判斷IE瀏覽器及版本號
        }
        if (Sys.firefox != null) {
 return ("firefox:"   Sys.firefox);//判斷firefox瀏覽器及版本號
        }
        if (Sys.chrome != null) {
            return ("chrome:"   Sys.chrome) ;//判斷chrome瀏覽器及版本號碼
        }
       if (Sys.opera != null) {
  .> 
        }
        if (Sys.safari != null) {
           }
    }



4：事件監聽

複製程式碼複製程式碼

程式碼如下

function(element, type, handler){
        if (element.addEventListener) {
        }
        else 
            if (element.attachEvent) {
                element.attachEvent("on" type, handler);
   se {
                element["on" type] = handler;
        }



5：事件移除

複製程式碼複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼複製碼

function(element, type, handler){ if (element.removeEventListenerener } else if (element.detachEvent) { } else { } }6：取得event，Firefox事件不斷派發的時候，第一次事件會出現問題。複製程式碼程式碼如下:

function(event){

        event = (event ? event : window.event);
   E = function() {
                var c = $E.caller;
                  c = c.caller;
                return c.arguments[0]
  __defineGetter__( "event", $E);
        }
        return event;
    }


    }

複製程式碼

程式碼如下:function(event){ event. preventDefault(); }

else {

          }

8：不繼續傳播事件

複製程式碼

程式碼如下:

function(event){ .stopPropagation) { event.stopPropagation(); event.cancelBubble = true;

}

    }

9：取得event的target

複製程式碼

程式碼如下:

程式碼如下: return event.target || event.srcElement;

}

10：documen.docm.

E：如果有文件類型說明，會將其錯誤的解釋為註解並把它當作Comment節點，document.doctype的值總是null。 

Firefox：如果有文件類型說明，則將其作為文件的第一個子節點，document.doctype是一個DocumentType節點，也可以透過firstChild或childNodes[0]存取同一個節點。
Safari、Chrome、Opera：如果有文件類型說明，則將其作為解釋，但不作為文件的子節點，不會出現在childNodes中的。

11：找元素

我有時候，我真搞不明白，IE總是在搞什麼，總是想標新立異。如果系統不讓自備瀏覽器的話，我敢說，IE的份額將會更少。

如果id跟name一樣的話，他也會被回傳

複製程式碼

程式碼如下:

var item=document.getElementById("my"); item.value="SECOND";

在IE中，結果改變了。

同樣是IE，Id大小寫不區分

複製程式碼程式碼如下:

程式碼如下:

不好意思，他的結果又改變了。

12：如果是自訂屬性的話，item.myattributs在非IE瀏覽器的情況下，是無法得到正確結果的。

複製程式碼

程式碼如下:

function(item,v)(item >  return item.attributes[myatt].value;
 }

同樣的話，設定屬性應該知道該怎麼辦吧，就是賦值唄。

複製程式碼程式碼如下:

function(item,myatt,value){

function(item,myatt,value){

function(item,myatt,value){
function(item,myatt,value){
function(item,myatt,value){

function(item,myatt,value) item.attributes[myatt].value=value; }13：元素的子節點數量

複製程式碼程式碼如下:

first

first

third

IE結果是3，而其他瀏覽器是7。

Node之間的空白符，在其他瀏覽器是文字節點，結果就是7。如果變成這樣，複製程式碼

 程式碼如下:

first
second
third

這樣大家的結果都是3了。

14：創立節點問題

複製代碼

代碼如下:

//動態新增Element，所有的瀏覽器都可以實作var newnode=document.createElement("input");newnode.type="button";newnode.value="sixth ";//在IE中可以還這樣實作var newnode= document.createElement("");15：在屏蔽右鍵的時候，firefox與其他的不一樣，在oncontextmenu事件中。 16：還有動態加入style和script的時候，IE和其他的瀏覽器是不一樣的。具體查查。 17：對於DOM2和DOM3，情況更複雜了。