getAttribute的返回值類型(Firefox與IE兼容性)

在改AJAXRequest的過程中,碰到了個問題,應該算是Firefox和IE之間的兼容性問題。

提交表單時,往往需要先對錶單進行驗證,而這個驗證的過程一般是放在form標籤的onsubmit屬性中。

onsubmit一般是由瀏覽器在form的submit動作發生時自動觸發,但是如果表單由我們自己來提交,比如在AJAX應用中,就是由我們自己寫程序將表單轉換成請求字符串,再通過XMLHttpRequest發送到服務器,那麼如果在此同時不丟掉表單驗證的話,就需要我們自己來獲取 onsubmit屬性,並去處理它。

在獲取屬性時,爲了保證兼容性,我用getAttribute來獲取標籤的屬性值,但是發獲取了onsubmit屬性之後,發現在Firefox和IE中使用getAttribute("onsubmit")所返回的返回值類型是不同的。

測試代碼如下:

===================================================

// code by xujiwei from www.xujiwei.cn<br />
// Firefox中提示框內容爲string,IE中爲function<br />
<form id="test" οnsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" οnclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
alert(typeof(document.getElementById("test").getAttribute("onsubmit")));
//-->
</script>

===================================================

在Firefox中使用getAttribute("onsubmit")返回值的是一個字符串,而在IE中的返回值類型則是function,也就是一個函數,因此如果在IE中處理onsubmit,我們可以直接調用這個函數:

===================================================

// code by xujiwei from www.xujiwei.cn<br />
// 注意,下面這段代碼只能在IE中正常運行<br />
<form id="test" οnsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" οnclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
var vaf=document.getElementById("test").getAttribute("onsubmit");
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>

===================================================

但是,在Firefox中,使用getAttribute("onsubmit")返回的是一個字符串,因此就不能直接這樣使用了,而應該將字符串轉換成函數再去調用:

===================================================

// code by xujiwei from www.xujiwei.cn<br />
// 注意,下面這段代碼只能在Firefox中正常運行<br />
<form id="test" οnsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" οnclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
// 使用new Function將字符串轉換成函數
var vaf=new Function(document.getElementById("test").getAttribute("onsubmit"));
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>

===================================================

如果把上面這段代碼在IE中運行,那麼會發現無論是否在輸入框中輸入值,都會顯示“Error”。

因此,如果要解決這個問題,可以在使用getAttribute獲取onsubmit屬性值之後,判斷返回值類型是否爲字符串,如果是字符串就使用new Function將它轉換成函數:

===================================================

// code by xujiwei from www.xujiwei.cn<br />
// 注意,下面這段代碼在Firefox和IE中均能正常運行<br />
<form id="test" οnsubmit="return validform();">
Name: <input type="text" id="name" /><br />
<input type="button" οnclick="validate();" value="Validate" />
</form>
<script type="text/javascript">
<!--
function validform() {
return (document.getElementById("name").value!="");
}
function validate() {
var vaf=document.getElementById("test").getAttribute("onsubmit");
vaf=typeof(vaf)=="string"?new Function(vaf):vaf;
if(vaf())
alert("OK");
else
alert("Error");
}
//-->
</script>

發佈了147 篇原創文章 · 獲贊 7 · 訪問量 47萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章