js中兼容性问题的封装(能力检测)
所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
获得页面文本内容的方式:innnerText 或textContent 或innerHTML。
innerText在不同浏览器存在有兼容性问题,为此我们需要封装到一个函数里,使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好,这里只拿早期火狐版本和IE8及其之前版本作比较)
innerText和innerHTml的具体区别
在获取页面文本的时候
1,innerText只会获取到标签之间的文本信息,不会获取到标签;innerHTML是获得标签之前的所有内容,包括标签本身
2,IE8及之前的版本是支持innerText的,早期的火狐浏览器是不支持的,早期的火狐只支持textContent,而IE8不支持;innerHTML是所有浏览器都支持的,不存在兼容性问题
/**
* innerText textContent
* 获得页面标签之间文本内容的兼容性写法
* @param obj
* @returns {*}
*/
function getInnerText(obj) {
if (obj.innerText) { //IE8及之前的版本支持
return obj.innerText;
} else {
return obj.textContent; //早期的火狐支持
}
}
在设置页面文本的时候
1,innerText会把设置的文本内容原样输出;文本里即使有html标签,也不会渲染出来(发生了转义)
2,innerHTML会渲染出html标签的,无兼容性问题
/**
* 设置页面标签之间文本内容的兼容性写法
* @param obj
* @param value
*/
function setInnerText(obj, value) {
if (obj.innerText) {
obj.innerText = value;
} else {
obj.textContent = value;
}
}
若有很多此类兼容性问题需要封装,可以统一把它们封装到一个对象里,如下
var txt = {
getInnerText: function (obj) {
if (obj.innerText) { //IE8及之前的版本支持
return obj.innerText;
} else {
return obj.textContent; //早期的火狐支持
}
},
setInnerText: function (obj, value) {
if (obj.innerText) {
obj.innerText = value;
} else {
obj.textContent = value;
}
}
};
再看一个小例子
获得下一个兄弟元素节点的能力检测
nextSibling chrome,火狐都支持。但是会获得文本节点,IE8及之前版本会忽略空白文本节点
nextElementSibling chrome,火狐支持,IE8及之前版本不支持
/**
* 取下一个兄弟元素节点
* @param element
* @returns {*}
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) { //文本节点的节点值为1
node = node.nextSibling;
}
return node;
}
}
以后的工作和学习中有许多兼容性的问题,多了解封装的思想和方法。
js中兼容性问题的封装(能力检测)的更多相关文章
- js 中调用 Object.prototype.toString()来检测对象的类型
1.使用toString()方法来检测对象类型 可以通过toString() 来获取每个对象的类型.为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Fun ...
- js中运动框架的封装
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...
- JS中OOP之模拟封装和继承和this指向详解
大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...
- JS中深浅拷贝 函数封装代码
一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
- JS对象的概念、声明方式等及js中的继承与封装
对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=fu ...
- js中的数据类型,以及如何检测数据类型
基本数据类型:string,number,boolean,null,undefined,symbol 引用数据类型:object(array,function...) 常用的检测数据类型的方法一般有以 ...
- JS中数组方法的封装之slice
slice方法的功能 // 1) : 数组的截取 // 2) :slice(m,n): 从数组索引m开始,截取到索引n,但是不包含n;[前包后不包] // slice(m) : 从索引m开始,截取到末 ...
- js 中常用到的封装方法
/** * 获取URL参数 */ function getQueryString(name) { var reg = new RegExp("(^|&)" + name + ...
- 谈一谈原生JS中的【面向对象思想】
[重点提前说:面向对象的思想很重要!] 最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...
随机推荐
- test markdown
Markdown和Haroopad介绍文档 [TOC "float:right"] 什么是Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John ...
- LINQ系列:Linq to Object分区操作符
分区是指将一个单一的输入序列划分成两个或多个部分或序列,同时不会对输入元素重排序,返回一个新形成的部分.LINQ分割操作符包括Skip.SkipWhile.Take和TakeWhile. 1. Ski ...
- Task C# 多线程和异步模型 TPL模型
Task,异步,多线程简单总结 1,如何把一个异步封装为Task异步 Task.Factory.FromAsync 对老的一些异步模型封装为Task TaskCompletionSource 更通用, ...
- jQuery源码分析系列(34) : Ajax - 预处理jsonp
上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...
- OpenCASCADE Coordinate Transforms
OpenCASCADE Coordinate Transforms eryar@163.com Abstract. The purpose of the OpenGL graphics process ...
- 谈谈基于OAuth 2.0的第三方认证 [中篇]
虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...
- MyEclipse 2014跟2015破解
最近一直在弄后台开发,之前用idea感觉用的很不习惯,于是就换了myeclipse,两年多没有用myeclipse了,版本都很高了,记得我们之前用myeclipse8.5版本的时候,注册码什么的直接运 ...
- 升级 Visual Studio 2015 CTP 5 的坑、坑、坑
前两天,微软发布了 Visual Studio 2015 CTP 5,全称为 Visual Studio 2015 Community Technology Preview 5,意为社区技术预览版,之 ...
- php上传功能集后缀名判断和随机命名
form.php <html> <head> <meta http-equiv="content-type" content="text/h ...
- [TSM]在调度计划的时候出现 “ANS1125E Unmatched Quotes: 'string' ”错误的替代解决办法
环境: TSMserver:TSM 6.2.3 for Windows Server 2008 R2 TSMclient: TSM 5.5.0 for CentOS 遇到的故障: ANS1125E U ...