文章專區

網頁程式技術探討

Client端程式碼對各種瀏灠器相容性

Client 端程式碼對各種瀏灠器的相容性


 

通常,動態網頁除了 Server 端的程式碼撰寫Client 端程式碼也必須下不少工夫。例如:表單提交前的資料驗證、圖片的輪播、選單的收合等等。
因此,對於 Client 端 是否能正常執行指令碼也必須適當的考量,然而目前瀏灠器的種類繁多,對JavaScript程式碼的解讀也不同;所以如何撰寫出能在大部份瀏灠器上正常執行的指令碼是非常重要的,否則網頁的跨平台性將會大打折扣。

以目前較多人使用的 IE 及 FireFox 來說,有些指令碼其實並不通用,所以在程式的撰寫上必須要多加注意,因此有時候得視情況撰寫替代的程式碼以增加相容性。


 

舉例來說:


 

指令:document.getElementsByName("myID")
作用:找出所有 ID="myID" 的元素遵回傳 Array
雖然此一指令能夠在 IE 上正常執行,但是到了 FireFox 上卻是一點用也沒有。
因此,可以考慮將這些元素的 ID 額外加上編號 x ( x 代表任意數字),然後在網頁載入後,再使用 document.getElementById("myID_x") 將各個元素一一存進一個 Array。
 


 

屬性:e.innerText
作用:存取元素的文字內容
在 IE 上,可以使用 e.innerText = "測試內文"; 來指定元素 e 的內容;但是在 FireFox 上,innerText 這個屬性卻沒辦法正常使用。
所幸還有一個屬性 innerHTML 可以在兩者正常執行,因此應該儘量使用 innerHTML 來替代 innerText。
 


 

參數:
說明:tbCell 為 table 的 cell 元素、tbRow 為 table 的 row 元素
下列指令碼是在 row 元素中,插入一個 cell 元素,index 為插入位置
tbCell = tbRow.insertCell(); //IE 執行正常、FireFox 則否
tbCell = tbRow.insertCell(index); //IE、FireFox 皆正常
 

對於常使用 Client 端 指令碼來產生動態產生元素的程設師而言,選擇較高相容性的指令碼來撰寫雖然比較費時;但是至少能夠確保大部份的使用者都能正常顯示、操作,也能減少許多因為相容性而衍生出來的問題。


 

 

Posted by 程式設計師 / wyvern