最近在使用一些AJAX（Asynchronous Javasript and XML）做一些简单的应用。本来不太常用JS的，因为不太好调试的缘故吧，编写程序实在不易。今天写点关于这方面的内容。
突然发现innerText在实际应用中的确很重要。先看段简单的代码，如下所示。这段代码演示了如何将一个字符串写入名为“lblResult”的Tag的简单示例。这段代码在IE，Safari 以及Chrome下都会运行非常良好。但是在Firefox浏览器下却无法显示该字符串。原因是Firefox并不支持Tag的innerText属性。
innerText示例1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax_WebService</title>
<script type="text/javascript">
function SubmitMethod(){
var result = document.getElementById('lblResult');
if(result.innerText == "")
result.innerText = "This is a simple innerText Test!";
else
result.innerText = "";
}
</script>
</head>
<body>
<form id="Coord" action="">
<div>
<input type="button" id="btn" value="Change Text" onclick="SubmitMethod();" />
<label id="lblResult"></label>
</div>
</form>
</body>
</html>
从网上找到螺螺的blog中[1] 写到了如下代码，很是经典，对Firefox的内部属性进行了扩展，在引用下段javascript后可以非常容易的在Firefox中使用innerText属性。
innerText示例2 innerText for Firefox
//
// 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) );
其中从[2] 中了解到，如果浏览器采用下列逻辑判断其类型，可以非常简洁的获得当前浏览器的类型，该逻辑返回值为boolean(true/false)。
/MSIE/.test(window.navigator.userAgent)
/Firefox/.test(window.navigator.userAgent)
/Chrome/.test(window.navigator.userAgent)
/Opera/.test(window.navigator.userAgent)
当然浏览器类型也可以用如下方法来检测，不过感觉使用上比较啰嗦，不如上面的方法更简洁易懂。
A traditional method to detect type of navigator
/**//*Test Navigator Type*/
function NavigatorType(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
return Sys;
/**//*
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
*/
}
下面的示例是innerText的一种较为通用的版本的事例。使用了上面提到innerText的的扩展方法。
完整的适合各浏览器的innerText属性的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax_WebService</title>
<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) );
function SubmitMethod(){
var result = document.getElementById('lblResult');
if(result.innerText == "")
result.innerText = "This is a simple innerText Test!";
else
result.innerText = "";
}
</script>
</head>
<body>
<form id="Coord" action="">
<div>
<input type="button" id="btn" value="Change Text" onclick="SubmitMethod();" />
<label id="lblResult"></label>
</div>
</form>
</body>
</html>
Reference:
1.为firefox实现innerText属性. 螺螺的blog. http://www.cnblogs.com/luoluo/archive/2008/11/24/1340111.html
2.Using the navigator object to detect client's browser. JavaScript Tutorial. http://www.javascriptkit.com/javatutors/navigator.shtml
