Home > Developer > JavaScript
Implement the innerText attribute for firefox
A lot of code has been written, forgotten, and written, which is a waste of resources, so I decided to develop the habit of taking notes.
Knowledge point:
0. Why innerText? Security problems
1. Extend attributes for the firefox dom Model
2. The currentStyle attribute can get the actual style status.
3. The display mode is taken into account when IE implements innerText. If it is block, a line break is added.
4. Why not use textContent? Because textContent does not consider the display method of elements, it is not fully compatible with IE.
Copy codeThe Code is as follows:
<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>
When I made JavaScript code that supports replication under firefox today, I used innerText. The test showed that firefox supports innerHTML but does not support innerText, so I searched for it online, I found a very good piece of code. In addition, we get the following compatible code from the reply. Corrected the error message in ie. For more information, see the article.
Add this section to your JS file to use innerText in MOZILLA/FIREFOX.
Copy codeThe Code is as follows:
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;
}
);
However, in IE, this code will prompt that HTMLElement is undefined. The following is the specific solution.
Copy codeThe Code is as follows:
Function isIE () {// ie? Judge whether it is 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;
}
);
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
