让FireFox支持innerText的实现代码


Posted in Javascript onDecember 01, 2009

为firefox实现innerText属性
很多代码写了又忘忘了又写,很浪费,所以决定养成做笔记的习惯。
知识点:
0、为什么要innerText?因为安全问题
1、为firefox dom模型扩展属性
2、currentStyle属性可以取得实际的style状态
3、IE实现innerText时考虑了display方式,如果是block则加换行
4、为什么不用textContent?因为textContent没有考虑元素的display方式,所以不完全与IE兼容

<html> 
<body> 
<div id="d1"><a href="aa">ccc</a>ddd<div>eeee</div>fff</div> 
<script type="text/javascript"> 
<!-- 
// 
// patch of innerText for firefox 
// 
(function (bool) { 
function setInnerText(o, s) { 
while (o.childNodes.length != 0) { 
o.removeChild(o.childNodes[0]); 
} 
o.appendChild(document.createTextNode(s)); 
} 
function getInnerText(o) { 
var sRet = ""; 
for (var i = 0; i < o.childNodes.length; i ++) { 
if (o.childNodes[i].childNodes.length != 0) { 
sRet += getInnerText(o.childNodes[i]); 
} 
if (o.childNodes[i].nodeValue) { 
if (o.currentStyle.display == "block") { 
sRet += o.childNodes[i].nodeValue + "\n"; 
} else { 
sRet += o.childNodes[i].nodeValue; 
} 
} 
} 
return sRet; 
} 
if (bool) { 
HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
return this.ownerDocument.defaultView.getComputedStyle(this, null); 
}); 
HTMLElement.prototype.__defineGetter__("innerText", function () { 
return getInnerText(this); 
}) 
HTMLElement.prototype.__defineSetter__("innerText", function(s) { 
setInnerText(this, s); 
}) 
} 
})(/Firefox/.test(window.navigator.userAgent)); 
//--> 
</script> 
<script type="text/javascript"> 
<!-- 
var d1 = document.getElementById("d1"); 
alert(d1.innerText); 
d1.innerText = "xxx"; 
//--> 
</script> 
</body> 
</html>

今天在制作firefox下支持复制的js代码的时候,用到了innerText,测试发现原来firefox支持innerHTML但不支持innerText,所以上网找了一下,发现了一篇非常不错的代码。另从回复中,我们得到了如下兼容代码。修正了原来ie下出现错误提示的问题。具体的看下么的文章。

把这段加在你所JS文件中就可以在MOZILLA/FIREFOX下使用innerText

HTMLElement.prototype.__defineGetter__ 
( 
"innerText", 
function () 
{ 
var anyString = ""; var childS = this.childNodes; 
for(var i=0; i<childS.length; i++) 
{ 
if(childS[i].nodeType==1) 
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText; 
else if(childS[i].nodeType==3) 
anyString += childS[i].nodeValue; 
} 
return anyString; 
} 
);

但这段代码在IE中它会提示HTMLElement未定义,下面就是具体的解决方法。

function isIE(){ //ie? 判断是不是ie 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
return true; 
else 
return false; 
} 
if(!isIE()){ 
HTMLElement.prototype.__defineGetter__ 
( 
"innerText", 
function () 
{ 
var anyString = ""; var childS = this.childNodes; 
for(var i=0; i<childS.length; i++) 
{ 
if(childS[i].nodeType==1) 
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText; 
else if(childS[i].nodeType==3) 
anyString += childS[i].nodeValue; 
} 
return anyString; 
} 
); 
}
Javascript 相关文章推荐
常用一些Javascript判断函数
Aug 14 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue获取form表单的值示例
Oct 29 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 #Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 #Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 #Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 #Javascript
Ruffy javascript 学习笔记
Nov 30 #Javascript
jquery 分页控件实现代码
Nov 30 #Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 #Javascript
You might like
php自定义session示例分享
2014/04/22 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP xpath()函数讲解
2019/02/11 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jquery操作select大全
2014/04/25 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python使用KNN算法手写体识别
2018/02/01 Python
python re模块的高级用法详解
2018/06/06 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
英语三分钟演讲稿
2014/08/19 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
Python借助with语句实现代码段只执行有限次
2022/03/23 Python