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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 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
thinkphp控制器调度使用示例
2014/02/24 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
浅析vue-router原理
2018/10/19 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python安装教程
2018/02/28 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python实现PCA降维的示例详解
2020/02/24 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
用python写爬虫简单吗
2020/07/28 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
大学总结自我鉴定
2014/01/18 职场文书
读书活动总结
2014/04/28 职场文书
小学综合实践活动总结
2014/07/07 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
华山导游词
2015/02/03 职场文书
行政复议答复书
2015/07/01 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python