解決innerHTML賦值問(wèn)題

■

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

故障排查

因?yàn)槭菫g覽器不同導(dǎo)致的故障，懷疑是瀏覽器兼容性引起的問(wèn)題。于是打開(kāi)IE8瀏覽器的開(kāi)發(fā)人員工具，進(jìn)行了調(diào)試。

首先在為select標(biāo)簽的innerHTML賦值語(yǔ)句前設(shè)置斷點(diǎn)，然后啟動(dòng)調(diào)試，查看賦值是否正常，顯示如圖1。

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

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

說(shuō)明賦值正常，但是頁(yè)面上仍無(wú)法顯示select標(biāo)簽中的內(nèi)容，調(diào)試js的控制臺(tái)也不報(bào)任何錯(cuò)誤。查看網(wǎng)頁(yè)的源代碼，顯示如圖2。

表明select標(biāo)簽下無(wú)任何內(nèi)容。Select標(biāo)簽的innerHTML作為局部變量能夠賦值，但是賦值的語(yǔ)句執(zhí)行完后，頁(yè)面沒(méi)有隨之更新，于是懷疑是select標(biāo)簽不支持innerHTML進(jìn)行賦值。

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

仍然無(wú)法正常顯示。于是再查閱相關(guān)資料，找到如下表述：

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標(biāo)簽的innerHTML是只讀的。但這里并沒(méi)有提到select標(biāo)簽。在網(wǎng)上檢索相關(guān)資料，發(fā)現(xiàn)有網(wǎng)友指出，select標(biāo)簽也存在同樣的問(wèn)題，故障原因終于找到了。

解決辦法

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

經(jīng)驗(yàn)總結(jié)

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