首先:如何处理兼容问题

1.如果两个都是属性,用逻辑||做兼容

2.如果有一个是方法,用三元做兼容

3.如果是多个属性或方法,封装函数做兼容

分享两个小知识点:

1、取消拖拽的默认行为:

document.ondragstart = function(){

  return false

}

2、阻止右键菜单的默认行为:

document.oncontextmenu = function(){

  return false

}

开始兼容问题:

一、运用逻辑运算符||做的相关兼容

1、关于获取滚动高度的不兼容问题

var scrollTop=documentElement.scrollTop

var scrollTop=document.body.scrollTop(chrome写法)

兼容写法:

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

2、关于获取事件对象的兼容:

function (eve){

  var e = eve || window.event

}

3、获取键盘编码的兼容:

function (eve){

  var e = eve || window.event

  var keyValue = e.keyCode || e.charCode || e.which

}

4、关于事件委托获取事件源的兼容问题:

function (eve){

  var e = eve || window.event

  var target = e.target || e.srcElement

}

二、运用三元表达式做的兼容

1、阻止事件冒泡的兼容

function (eve){

  var e = eve || window.event

  e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

}

2、阻止超链接的默认行为:

oA.onclick = function (eve){

  var e = eve || window.event

  e.preventDefault ? e.preventDefault() : e.returnValue = false

}

三、运用方法进行兼容的问题:

1、添加事件监听:

function addEventListener(obj,event,fn,boo){

if(obj.addEventListener){

obj.addEventListener(event,fn,boo);

}else{

    obj.attachEvent("on" + event,fn);

  }

}

运用:

addEventListener(oBtn,"click",fn1,false);

addEventListener(oBtn,"click",fn2,false);

addEventListener(oBtn,"click",fn3,false);

2、移除事件监听:

function removeEventListener(obj,evt,fn,boo){

if(obj.removeEventListener){

    obj.removeEventListener(evt,fn,boo);

}else{

    obj.detachEvent("on" + evt,fn);

  }

}

removeEventListener(oBtn,"click",fn2,false);

3、获取鼠标键值的兼容:(event.button)

function getbutton(eve){

  var e = eve || window.event;

  if(eve){//判断是否为标准浏览器

  return e.button

}else if(window.event){//判断是不是IE

switch(e.button){

case 1 :  return 0;

case 4 :  return 1;

case 2 :  return 2;

}}}

二:关于使用getAttribute获取className不兼容的问题

<div id="box1"></div>

var oBox=document.getElementById("box1")

(1)console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持

(2)console.log(oBox.getAttribute("class")//标准浏览器支持,ie7不支持

兼容写法:

function fn(obj){

if(obj.getAttribute("class"))==null{

return obj.getAttribute("className");

}else{

 return obj.getAttribute("class")

}

};

三:关于getElementsByClassName("class属性名称")的不兼容问题;

console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持,ie8以下不支持

兼容写法:

function fn(obj.class属性名称){

if(obj.getElementsByClassName){

return   obj.getElementsByClassName(className);

}else{

var list = [];

var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素

for(var i = 0;i < arr.length;i ++){

if(arr[i].className == className){

list.push(arr[i]);

}

}

return list;}}

遍历所有元素,找出class名为指定名字的元素

四: 关于处理空白文本节点的问题

1.忽略空白文本节点

function fn(nodes){

var arr = [];

for(var i = 0;i < nodes.length;i ++){

if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

continue;

}else{

arr.push(nodes[i]);

}}    return arr;}

2.删除空白文本节点:

function fn(nodes){//nodes;所有的子节点

for(var i = 0;i < nodes.length;i ++){

if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

nodes[i].parentNode.removeChild(nodes[i]);}}

return nodes

}

3.移除空白节点

function fn(node){//node:父节点

var childs = node.childnodes;//获取所有子节点

for(var i = 0;i < childs.length;i ++){

if(childs[i].nodeType === 3 &&

/^\s+$/.test(childs[i].nodeValue)){

node.removeChild(childs[i]);}}

return node;

}

五:获取非行内样式的兼容写法

function getStyle(obj,attr){

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];

}

attr:是属性;比如

<style>#box{width:100px;}</style>

<div id = box></div>

<script>

var oBox = document.getElementById("box");

function getStyle(obj,attr){

return obj.currentStyle ?       obj.currentStyle[attr] :      getComputedStyle(obj,true[attr];

};

var s = getStyle(oBox,"width");

alert(s);

</script>

如何处理使用js兼容所有浏览器的问题的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. js兼容各个浏览器的复制功能

    看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...

  3. JS兼容IE浏览器的方法

    背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/ja ...

  4. js兼容多浏览器的关闭当前页面

    关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理.关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好. 下面 ...

  5. 调用iframe 中的js[兼容各种浏览器]

    *chrome浏览器需要在服务器环境中测试 <!DOCTYPE html> <html> <head> <meta http-equiv="cont ...

  6. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  7. ZeroClipboard.js兼容各种浏览器复制到剪切板上

    http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...

  8. JS兼容所有浏览器的一段加入收藏代码,设置为首页

    <script language="javascript" type="text/javascript"> function addfavorite ...

  9. JS获取回车事件(兼容各浏览器)

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

随机推荐

  1. Java_数据交换_fastJSON_01_用法入门

    一.用法 1.序列化—将Object转为Json对象 Object data=JSON.toJSON( MyObject ); 注:本文的Object可以是Map.List.javaBean等 需求: ...

  2. Centos下配置tomcat7的https证书

    近期搞定了HTTPS配置,特此记录. 1.把下载的文件拷贝到cert文件夹,然后放在tomcat根目录下(与conf同一级目录).2.配置conf下的server.xml,修改下面3个节点,如下: & ...

  3. 设计模式的征途—11.外观(Facade)模式

    在软件开发中,有时候为了完成一项较为复杂的功能,一个类需要和多个其他业务类交互,而这些需要交互的业务类经常会作为一个完整的整体出现,由于涉及的类比较多,导致使用时代码较为复杂,此时,特别需要一个类似服 ...

  4. 私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)shang

    网盘系统2.0   上周,我做了第一版的“私人网盘系统”,http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下,这周在家升级做了第 ...

  5. yaml在python中的应用简单整理

    #简单介绍============================================================== YAML使用寄主语言的数据类型,这在多种语言中流传的时候可能会引 ...

  6. 【玩转树莓派】使用 sinopia 搭建私有 npm 服务器

    简介 使用 sinopia 的好处是,node系的工程师,内部协作时,使用自有 npm 包,会非常方便:另外,sinopia,会缓存已经下载过的包,可以在相当程度上,加速 npm install 相关 ...

  7. eclipse中Maven工程使用Tomcat7以上插件

    Maven中使用tomcat:run命令默认是使用Tomcat6的版本, 现在要用到Tomcat7以上的版本,在eclipse的Maven工程中配置如下 第一步:在项目的pom里面加入如下配置: 官网 ...

  8. OC的内存管理和@class

    1. 基本原理 1. 什么是内存管理 ➢ 移动设备的内存极其有限,每个app所能占用的内存是有限制的 ➢ 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收 ...

  9. Teredo Tunnel Adapter: Error Code 10

    Teredo Tunneling 该设备无法启动 错误代码 ErrCode:10 解决方法 前文: Win7 系统,打算开启IPV6,本地连接的网络 ip6 驱动是异常的,先重新安装了网卡驱动. 过程 ...

  10. 第十一章 泛型算法 C++ PRIMER

    vector<int>::const_iterator result = find(vector.begin(). vector.end(),search_value); 如果查找失败,分 ...