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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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中session_unset与session_destroy的区别分析
2011/06/16 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
js格式化时间的方法
2015/12/18 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue实现登录功能
2020/12/31 Vue.js
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python内置模块turtle绘图详解
2017/12/09 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python版大富翁源代码分享
2018/11/19 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
学生实习自我鉴定
2013/10/11 职场文书
调解员先进事迹材料
2014/02/07 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python