欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2013年12月31日 09:16:09   作者：  
本篇文章只要是對JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

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

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

1：獲得滾動條的情況

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

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：獲得視圖瀏覽器的寬度高度
復(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)前瀏覽器型號 名字
復(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瀏覽器及版本號
        }
        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：事件監(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ā)的時候，第一次事件會出現(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：阻止默認事件
復(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：如果存在文檔類型說明，會將其錯誤的解釋為一個注釋并把它當(dāng)做Comment節(jié)點，document.doctype的值始終是null。

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

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

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

如果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é)點個數(shù)
復(fù)制代碼 代碼如下:

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

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

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

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

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

這樣大家的結(jié)果都是3了。
14：創(chuàng)立節(jié)點問題
復(fù)制代碼 代碼如下:

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

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

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

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

相關(guān)文章

  • JavaScript空數(shù)組的every()方法實踐

    JavaScript空數(shù)組的every()方法實踐

    every()方法用于檢測數(shù)組中的所有元素是否都滿足指定條件, 本文主要介紹了JavaScript空數(shù)組的every()方法實踐,具有一定的參考價值,感興趣的可以了解一下
    2024-03-03
  • 原生JavaScript實現(xiàn)的無縫滾動功能詳解

    原生JavaScript實現(xiàn)的無縫滾動功能詳解

    這篇文章主要介紹了原生JavaScript實現(xiàn)的無縫滾動功能,結(jié)合實例形式詳細分析了JavaScript無縫滾動具體實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2020-01-01
  • firefox插件Firebug的使用教程

    firefox插件Firebug的使用教程

    Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強力推薦插件之一。
    2010-01-01

    • 最新評論