让FireFox支持innerText的实现代码

发布于 2016-08-21 06:46:50 | 131 次阅读 | 评论: 0 | 来源: 网友投递

Firefox 浏览器

firefox 即火狐浏览器。Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。Firefox由Mozilla基金会与社区数百个志愿者以GPL/LGPL/MPL三种授权方式发布

DHTML非标准属性innerText在FireFox中的使用
为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; 
} 
); 
}

让FireFox支持innerText的实现代码

Firefox 浏览器

后端技术

前端技术

数据库

热门框架

常用IDE

其他