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


Posted in Javascript onDecember 31, 2013

首先这里声明一下,关于我测试浏览器的版本是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,情况更复杂了。

Javascript 相关文章推荐
javascript数组输出的两种方式
Jan 13 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 #Javascript
jquery遍历select元素(实例讲解)
Dec 31 #Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 #Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 #Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 #Javascript
获取3个数组不重复的值的具体实现
Dec 30 #Javascript
改变隐藏的input中value的值代码
Dec 30 #Javascript
You might like
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JSONP之我见
2015/03/24 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
小程序实现多选框功能
2018/10/30 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python切片用法实例教程
2014/09/08 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Django和Flask框架优缺点对比
2019/10/24 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
PyQt5实现画布小程序
2020/05/30 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Django Paginator分页器的使用示例
2021/06/23 Python