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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
详谈javascript异步编程
Feb 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python实现一个论文下载器的过程
2021/01/18 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
项目计划书范文
2014/01/09 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年关工委工作总结
2014/11/17 职场文书
民事二审代理词
2015/05/25 职场文书
PHP策略模式写法
2021/04/01 PHP
七个非常实用的Python工具包总结
2021/06/15 Python