快捷導(dǎo)航

讓FireFox支持innerText的實(shí)現(xiàn)代碼

更新時(shí)間：2009年12月01日 23:58:51 作者：

DHTML非標(biāo)準(zhǔn)屬性innerText在FireFox中的使用

為firefox實(shí)現(xiàn)innerText屬性
很多代碼寫(xiě)了又忘忘了又寫(xiě)，很浪費(fèi)，所以決定養(yǎng)成做筆記的習(xí)慣。
知識(shí)點(diǎn)：
0、為什么要innerText？因?yàn)榘踩珕?wèn)題
1、為firefox dom模型擴(kuò)展屬性
2、currentStyle屬性可以取得實(shí)際的style狀態(tài)
3、IE實(shí)現(xiàn)innerText時(shí)考慮了display方式，如果是block則加換行
4、為什么不用textContent？因?yàn)閠extContent沒(méi)有考慮元素的display方式，所以不完全與IE兼容

復(fù)制代碼代碼如下:

 
<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下支持復(fù)制的js代碼的時(shí)候，用到了innerText，測(cè)試發(fā)現(xiàn)原來(lái)firefox支持innerHTML但不支持innerText,所以上網(wǎng)找了一下，發(fā)現(xiàn)了一篇非常不錯(cuò)的代碼。另從回復(fù)中，我們得到了如下兼容代碼。修正了原來(lái)ie下出現(xiàn)錯(cuò)誤提示的問(wèn)題。具體的看下么的文章。

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

復(fù)制代碼代碼如下:

 
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中它會(huì)提示HTMLElement未定義，下面就是具體的解決方法。

復(fù)制代碼代碼如下:

 
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; 
} 
); 
} 