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 document.createDocumentFragment()
Apr 04 Javascript
JS类的封装及实现代码
Dec 02 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
详谈js模块化规范
Jul 07 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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 图像函数大举例(非原创)
2009/06/20 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php批量上传的实现代码
2013/06/09 PHP
php实现session共享的实例方法
2019/09/19 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python使用smtplib模块发送邮件
2020/12/17 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
迟到检讨书大全
2014/01/25 职场文书
安全生产承诺书范文
2014/05/22 职场文书
护士求职信
2014/07/05 职场文书
倡议书格式
2014/08/30 职场文书
食品药品安全责任书
2015/05/11 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
react 路由Link配置详解
2021/11/11 Javascript
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
spring boot实现文件上传
2022/08/14 Java/Android