让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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
vue实现简单学生信息管理
May 30 Javascript
js实现简单的轮播图效果
Dec 13 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环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
js Function类型
2011/12/04 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
论文评语大全
2014/04/29 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
详解Java实践之建造者模式
2021/06/18 Java/Android