脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → IE firefox 兼容

JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)

 更新时间：2013年12月31日 09:16:09   作者：  
本篇文章只要是对JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助

首先这里声明一下，关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester

下面的代码关于声明

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\">");

15：在屏蔽右键的时候，firefox与其他的不一样，在oncontextmenu事件中。

16：还有动态添加style和script的时候，IE和其他的浏览器是不一样的。具体查查。

17：对于DOM2和DOM3，情况更复杂了。

您可能感兴趣的文章:

相关文章

  • js实现贪吃蛇游戏（简易版）

    js实现贪吃蛇游戏（简易版）

    这篇文章主要为大家详细介绍了js实现贪吃蛇游戏简易版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS批量替换内容中关键词为超链接

    JS批量替换内容中关键词为超链接

    本文主要介绍了JS批量替换内容中关键词为超链接，避开已存在的链接和alt、title中的关键词的方法。下面跟着小编一起来看下吧
    2017-02-02
  • JS面向对象编程实现的Tab选项卡案例详解

    JS面向对象编程实现的Tab选项卡案例详解

    这篇文章主要介绍了JS面向对象编程实现的Tab选项卡,结合具体案例形式详细分析了JS基于面向对象程序设计实现Tab选项卡的相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • 教你一步步实现一个简易promise

    教你一步步实现一个简易promise

    Promise是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理且更强大,这篇文章主要给大家介绍了关于如何一步步实现一个简易promise的相关资料,需要的朋友可以参考下
    2021-11-11
  • 微信小程序表单弹窗实例

    微信小程序表单弹窗实例

    这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 微信小程序滚动、轮播图和文本实例详解

    微信小程序滚动、轮播图和文本实例详解

    轮播图是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于微信小程序滚动、轮播图和文本的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • js特殊字符过滤的示例代码

    js特殊字符过滤的示例代码

    本篇文章主要是对js特殊字符过滤的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • js Math数学简单使用操作示例

    js Math数学简单使用操作示例

    这篇文章主要介绍了js Math数学简单使用,结合实例形式分析了js Math数学相关函数的基本用法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • javascript DOM对象的学习实例代码

    javascript DOM对象的学习实例代码

    javascript DOM对象的学习实例代码
    2009-06-06
  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    这篇文章主要介绍了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法,涉及javascript针对谷歌浏览器事件判定相关操作技巧,需要的朋友可以参考下
    2016-08-08

最新评论