■

筆者近期開發(fā)了一套B/S架構的軟件，其中用到了Ajax動態(tài)讀取Excel文件的首行，并更新在網(wǎng)頁中進行展示。最初的設想是前臺頁面中建立一個空白的select標簽，用戶點擊網(wǎng)頁中的按鈕時向服務器發(fā)送請求獲取Excel文件的首行，再對select標簽的innerHTML賦值。這種方法在IE10、chrome瀏覽器下都能正常運行，但是在IE8下卻無法正常顯示。

故障排查

因為是瀏覽器不同導致的故障，懷疑是瀏覽器兼容性引起的問題。于是打開IE8瀏覽器的開發(fā)人員工具，進行了調試。

首先在為select標簽的innerHTML賦值語句前設置斷點，然后啟動調試，查看賦值是否正常，顯示如圖1。

圖1 查看賦值狀態(tài)

圖2 查看網(wǎng)頁源代碼

說明賦值正常，但是頁面上仍無法顯示select標簽中的內容，調試js的控制臺也不報任何錯誤。查看網(wǎng)頁的源代碼，顯示如圖2。

表明select標簽下無任何內容。Select標簽的innerHTML作為局部變量能夠賦值，但是賦值的語句執(zhí)行完后，頁面沒有隨之更新，于是懷疑是select標簽不支持innerHTML進行賦值。

對js代碼進行了修改，通過Ajax獲取到數(shù)據(jù)后，創(chuàng)建一個新的select對象，然后將網(wǎng)頁中的select進行替換。代碼如下：

仍然無法正常顯示。于是再查閱相關資料，找到如下表述：

The inner HTML property is read-only on the col， colGroup， frameSet，html， head， style， table，tBody， tFoot， tHead， title，and tr objects.

意 思 是 col、colGroup、frameSet、html、head、style、table、tBody、tFoot、tHead、title、tr標簽的innerHTML是只讀的。但這里并沒有提到select標簽。在網(wǎng)上檢索相關資料，發(fā)現(xiàn)有網(wǎng)友指出，select標簽也存在同樣的問題，故障原因終于找到了。

解決辦法

原因找到了解決就比較容易了，既然select標簽的innerHTML是只讀的，那么在select上層放置一個div標簽，然后在服務器端根據(jù)Excel文件的首行生成select標簽的html代碼，在前臺頁面中用Ajax獲取到該html代碼后，通過更新上層div的innerHTML的方法，實現(xiàn)select標簽內容的顯示，問題終于得到解決。

經驗總結

瀏覽器的兼容性一直都是從事前端設計不可避免的問題，而IE瀏覽器不同版本間的差異也很大，在開發(fā)完成后，應使用多個瀏覽器進行測試。本次是查閱了微軟的相關文檔才順利解決問題，現(xiàn)將這次的故障排查過程分享給大家，希望對大家以后解決此類問題有所幫助。