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中暂停功能的实现代码
Mar 04 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php类常量的使用详解
2013/06/08 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP7新增函数
2021/03/09 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python 深入理解yield
2008/09/06 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
python 字符串追加实例
2019/07/20 Python
python实现桌面气泡提示功能
2019/07/29 Python
Django配置文件代码说明
2019/12/04 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
区域销售经理岗位职责
2013/12/10 职场文书
物控部经理职务说明书
2014/02/25 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
高中同学会活动方案
2014/08/14 职场文书
创业计划书之家政服务
2019/09/18 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
go开发alertmanger实现钉钉报警
2021/07/16 Golang