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

1：獲得滾動條的情況

復制代碼代碼如下:

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

        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;//滾動條的頂端
            l = document.documentElement.scrollLeft;//滾動條的左端
            w = document.documentElement.scrollWidth;//滾動條的寬度，也就是頁面的寬度
            h = document.documentElement.scrollHeight;//滾動條的高度
        }
        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：獲得視圖瀏覽器的寬度高度

  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：獲得當前瀏覽器型號 名字

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瀏覽器及版本號
        }
        if (Sys.firefox != null) {
            return ("firefox:" + Sys.firefox);//判斷firefox瀏覽器及版本號
        }
        if (Sys.chrome != null) {
            return ("chrome:" + Sys.chrome);//判斷chrome瀏覽器及版本號
        }
        if (Sys.opera != null) {
            return ("opera:" + Sys.opera);//判斷opera瀏覽器及版本號
        }
        if (Sys.safari != null) {
            return ("safari:" + Sys.safari);//判斷safari瀏覽器及版本號
        }
    }

 

 

4：事件監聽

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：事件移除

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，Firefox事件不斷派發的時候，第一次事件會出現問題。

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：阻止默認事件

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

 

8：不繼續傳播事件

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

 

9：獲得event的target

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

 

10：documen.doctype支持不一致

E：如果存在文檔類型說明，會將其錯誤的解釋為一個注釋並把它當做Comment節點，document.doctype的值始終是null。

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

Safari、Chrome、Opera：如果存在文檔類型說明，則將其作為解釋，但不作為文檔的子節點，不會出現在childNodes中的。

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

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

<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中，結果變化了。

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

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

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

 

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

13：元素的子節點個數

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

這樣大家的結果都是3了。 
14：創立節點問題

復制代碼代碼如下:

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

 

本文轉載自：http://www.jb51.net/article/45056.htm