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

更新時(shí)間：2013年12月31日 09:16:09 作者：

本篇文章只要是對(duì)JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

首先這里聲明一下，關(guān)于我測(cè)試瀏覽器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester

下面的代碼關(guān)于聲明

1：獲得滾動(dòng)條的情況

function getScroll(){
        var t, l, w, h;

        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;//滾動(dòng)條的頂端
            l = document.documentElement.scrollLeft;//滾動(dòng)條的左端
            w = document.documentElement.scrollWidth;//滾動(dòng)條的寬度，也就是頁面的寬度
            h = document.documentElement.scrollHeight;//滾動(dòng)條的高度
        }
        else 
            if (document.body) {
                t = document.body.scrollTop;
                l = document.body.scrollLeft;
                w = document.body.scrollWidth;
                h = document.body.scrollHeight;
            }
        return {
            t: t,
            l: l,
            w: w,
            h: h
        };
    }

2：獲得視圖瀏覽器的寬度高度

復(fù)制代碼代碼如下:

  function getPageWidth(){
        var pageWidth = window.innerWidth;
        if (typeof pageWindth != "number") {
            if (document.compatMode == "CSS1Compat") {
                pageWidth = document.documentElement.clientWidth;
            }
            else {
                pageWidth = document.body.clientWidth;
            }
        }
        return pageWidth;
    }

    function getPageHeight(){
        var pageHeight = window.innerHeight;
        if (typeof pageWindth != "number") {
            if (document.compatMode == "CSS1Compat") {
                pageHeight = document.documentElement.clientHeight;
            }
            else {
                pageHeight = document.body.clientHeight;
            }
        }
        return pageHeight;
    }

3：獲得當(dāng)前瀏覽器型號(hào) 名字

復(fù)制代碼代碼如下:

function(){
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (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瀏覽器及版本號(hào)
        }
        if (Sys.firefox != null) {
            return ("firefox:" + Sys.firefox);//判斷firefox瀏覽器及版本號(hào)
        }
        if (Sys.chrome != null) {
            return ("chrome:" + Sys.chrome);//判斷chrome瀏覽器及版本號(hào)
        }
        if (Sys.opera != null) {
            return ("opera:" + Sys.opera);//判斷opera瀏覽器及版本號(hào)
        }
        if (Sys.safari != null) {
            return ("safari:" + Sys.safari);//判斷safari瀏覽器及版本號(hào)
        }
    }

4：事件監(jiān)聽

復(fù)制代碼代碼如下:

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

5：事件移除

復(fù)制代碼代碼如下:

function(element, type, handler){
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        else 
            if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            }
            else {
                element["on" + type] = null;
            }
    }

6：獲得event，F(xiàn)irefox事件不斷派發(fā)的時(shí)候，第一次事件會(huì)出現(xiàn)問題。

復(fù)制代碼代碼如下:

function(event){

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

7：阻止默認(rèn)事件

復(fù)制代碼代碼如下:

function(event){
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    }

8：不繼續(xù)傳播事件

復(fù)制代碼代碼如下:

function(event){
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    }

9：獲得event的target

復(fù)制代碼代碼如下:

function(event){
        return event.target || event.srcElement;
    }

10：documen.doctype支持不一致

E：如果存在文檔類型說明，會(huì)將其錯(cuò)誤的解釋為一個(gè)注釋并把它當(dāng)做Comment節(jié)點(diǎn)，document.doctype的值始終是null。

Firefox：如果存在文檔類型說明，則將其作為文檔的第一個(gè)子節(jié)點(diǎn)，document.doctype是一個(gè)DocumentType節(jié)點(diǎn)，也可以通過firstChild或者childNodes[0]訪問同一個(gè)節(jié)點(diǎn)。

Safari、Chrome、Opera：如果存在文檔類型說明，則將其作為解釋，但不作為文檔的子節(jié)點(diǎn)，不會(huì)出現(xiàn)在childNodes中的。

11：查找元素
我有時(shí)候，我真搞不明白，IE總是在搞什么，總是想標(biāo)新立異。如果系統(tǒng)不讓自帶瀏覽器的話，我敢說，IE的份額將會(huì)更少。

如果id和name一樣的話，他也將被返回

復(fù)制代碼代碼如下:

<html>
    <head>
     <script defer>
      var item=document.getElementById("my");
   item.value="SECOND";

     </script>
    </head>
    <body>
     <input type="text" name="my" value="FIRST" >
    </body>
</html>

在IE中，結(jié)果變化了。

同樣是IE，Id大小寫不區(qū)分

復(fù)制代碼代碼如下:

<html>
    <head>
     <script defer>
      var item=document.getElementById("MY");
   item.value="SECOND";

     </script>
    </head>
    <body>
     <input type="text" id="my" value="FIRST" >
    </body>
</html>

不好意思，他的結(jié)果又變化了。

12：如果是自定義屬性的話，item.myattributs在非IE瀏覽器的情況下，是無法得出正確結(jié)果的。

復(fù)制代碼代碼如下:

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

同樣的話，設(shè)置屬性應(yīng)該知道怎么辦吧，就是賦值唄。

復(fù)制代碼代碼如下:

function(item,myatt,value){
  item.attributes[myatt].value=value;
 }

13：元素的子節(jié)點(diǎn)個(gè)數(shù)

復(fù)制代碼代碼如下:

 <ul id="myul">
   <li>first</li>
   <li>second</li>
   <li>third</li>
  </ul>

IE結(jié)果是3，其他瀏覽器是7。

Node之間的空白符，在其他瀏覽器是文本節(jié)點(diǎn)，結(jié)果就是7。如果變成這樣，

復(fù)制代碼代碼如下:

<ul id="myul"><li>first</li><li>second</li><li>third</li></ul>

這樣大家的結(jié)果都是3了。
14：創(chuàng)立節(jié)點(diǎn)問題

復(fù)制代碼代碼如下:

//動(dòng)態(tài)添加Element，所有的瀏覽器都可以實(shí)現(xiàn)
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//在IE中可以還這么實(shí)現(xiàn)
var newnode= document.createElement("<input type=\"button\">");

15：在屏蔽右鍵的時(shí)候，firefox與其他的不一樣，在oncontextmenu事件中。

16：還有動(dòng)態(tài)添加style和script的時(shí)候，IE和其他的瀏覽器是不一樣的。具體查查。

17：對(duì)于DOM2和DOM3，情況更復(fù)雜了。

您可能感興趣的文章: