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中的面向对象思想,无奈记性太差, ...
随机推荐
- XE1:使用SSMS创建Extended Events
Extended Events 用于取代SQL trace,是SQL Server 追踪系统运行的神器,其创建过程十分简单. 一,创建Extended Events的Session step1,打开N ...
- 【Win10 应用开发】扫描和连接Wi-fi网络
老周今天带大家去“扫雷”了,别当真,是扫描并连接指定无线网络,时尚一点叫Wi-fi. 所以,今天的任务要求你的设备至少有1张无线网卡,目前老周没看到过有N张无线网卡的设备.像笔记本.平板等设备都可以, ...
- jQuery 2.0.3 源码分析 事件体系结构
那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支 ...
- ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除
本来想接着上次把这篇写完的,没想到后来工作的一些事落下了,放假了赶紧补上. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP ...
- 遇到 HTTP 错误 403.14 - Forbidden?
打开 http://localhost:1609 报错: HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容 解决方案一:设置默认首页 在 Web.conf ...
- MySQL分区总结
MySQL支持RANGE,LIST,HASH和KEY四种分区.其中,每个分区又都有一种特殊的类型.对于RANGE分区,有RANGE COLUMNS分区.对于LIST分区,有LIST COLUMNS分区 ...
- ANNOTATION PROCESSING 101 by Hannes Dorfmann — 10 Jan 2015
原文地址:http://hannesdorfmann.com/annotation-processing/annotationprocessing101 In this blog entry I wo ...
- 如何在程序中给word文档加上标和下标
如何在程序中给word文档加上标和下标 上标或下标是一个小于普通行格式的数字,图形,标志或者指示通常它的设置与行相比偏上或偏下.下标通常显示于或者低于基准线,而上标则高于.上标和下标通常被用于表达公式 ...
- 一台电脑上的git同时使用两个github账户
需求: 公司有github账号,自己有github账号,想在git上同时使用,两者互不干扰. 思路: 管理两个SHH key. 解决方案: 一.生成两个SSH key 为了举例方便,这里使用“one” ...
- Android从网络某个地址下载文件、写入SD卡
首先创建一个HttpDownloader类,获取下载文件的网络地址,将文件下载下来以String流的方式返回: public String download(String urlStr){ //url ...