让FireFox支持innerText的实现代码

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

(0)

相关推荐

  • textContent在Firefox下与innerText等效的属性

    在IE和Opear下,DOM对象支持innerText属性,可以很方便的去除HTML标签. 但在Firefox不支持该属性,好在FF下的DOM对象支持textContent,该属性与innerText等效. 演示实例: <p id="TestObj">Hi,I'm <strong>cnlei</strong>.Welcome to my homepage:<a href="http://www.cnlei.com">h

  • 让innerText在firefox火狐和IE浏览器都能用的写法

    IE中的获取文本方法innerText在firefox中不支持 firefox改成了textContent方法/属性 并且在Firefox中文本中间的空白自符被无情的替换没了 使用起来异常不方便 现在好了,用Javascript重新定义了innerText方法 使得在Firefox中也可以使用innerText方法 并且此方法解决了firefox中空白字符的问题 使用方法: 将下面的脚本放在页面内 不管ie还是firefox都可以使用obj.innerText提取文本了 复制代码 代码如下: <

  • firefox浏览器不支持innerText的解决方法

    js代码: 复制代码 代码如下: <script> window.onload = function(){ <PRE class=javascript name="code">if(window.navigator.userAgent.toLowerCase().indexOf("msie")==0){ //firefox innerText HTMLElement.prototype.__defineGetter__( "inne

  • 让FireFox支持innerText的实现代码

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

  • 让Firefox支持event对象实现代码

    通常为了兼容IE与FireFox,一般的事件处理方法为: 复制代码 代码如下: btn.onclick=handle_btn_click; function handle_btn_click(evt){ if(evt==null)evt=window.event;//IE //处理事件. } 对于简单的程序,这不算麻烦. 但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦. 下面介绍一个解决这个麻烦事的

  • 让firefox支持IE的一些方法的javascript扩展函数代码

    这一段使得FireFox也支持IE的innerText方法 复制代码 代码如下: function isIE(){ if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) return true; else return false; } if(!isIE()){ //firefox innerText define HTMLElement.prototype.__defineGetter__( "

  • 关于Mozilla浏览器不支持innerText的解决办法

    比如: <p id="test"><strong><font color="red">Hello</font> , world!</strong></p> 我们使用代码:alert((document.getElementById("test")).innerText) 在IE.Chrome中,均能获取到"Hello , world!",但是在Firefo

  • IE浏览器兼容Firefox的JS脚本的代码

    1.window.event兼容脚本 2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerText写法 6.长度 7.父控件下的子控件 8.XmlHttp 1.window.event兼容脚本 function getEvent(){ //获取浏览器事件,同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0

  • jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

    jQuery中animate()的方法 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用margi

  • 支持ie与FireFox的剪切板操作代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>支持ie与FireFox的剪切板代码</title> <script type="text/javascript"> function setCopy(_sTxt){ try{ if(window.clipboardData){ window.clipboardData.

  • js substr支持中文截取函数代码(中文是双字节)

    复制代码 代码如下: <script language="JavaScript"> //得到字符总数function getChars(str) { var i = 0; var c = 0.0; var unicode = 0; var len = 0; if (str == null || str == "") {  return 0; } len = str.length; for(i = 0; i < len; i++) {   unico

  • 判断客户浏览器是否支持cookie的示例代码

    1. 复制代码 代码如下: function check(){  if(window.navigator.cookieEnabled)     return true;  else{     alert("浏览器配置错误,Cookie不可用!");     return false;}  } 2. 复制代码 代码如下: SetCookie('cookie_test','1');  var cookie_test = getCookie('cookie_test');  if( '1'

随机推荐