解决innerHTML赋值问题

■

笔者近期开发了一套B/S架构的软件，其中用到了Ajax动态读取Excel文件的首行，并更新在网页中进行展示。最初的设想是前台页面中建立一个空白的select标签，用户点击网页中的按钮时向服务器发送请求获取Excel文件的首行，再对select标签的innerHTML赋值。这种方法在IE10、chrome浏览器下都能正常运行，但是在IE8下却无法正常显示。

故障排查

因为是浏览器不同导致的故障，怀疑是浏览器兼容性引起的问题。于是打开IE8浏览器的开发人员工具，进行了调试。

首先在为select标签的innerHTML赋值语句前设置断点，然后启动调试，查看赋值是否正常，显示如图1。

图1 查看赋值状态

图2 查看网页源代码

说明赋值正常，但是页面上仍无法显示select标签中的内容，调试js的控制台也不报任何错误。查看网页的源代码，显示如图2。

表明select标签下无任何内容。Select标签的innerHTML作为局部变量能够赋值，但是赋值的语句执行完后，页面没有随之更新，于是怀疑是select标签不支持innerHTML进行赋值。

对js代码进行了修改，通过Ajax获取到数据后，创建一个新的select对象，然后将网页中的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标签。在网上检索相关资料，发现有网友指出，select标签也存在同样的问题，故障原因终于找到了。

解决办法

原因找到了解决就比较容易了，既然select标签的innerHTML是只读的，那么在select上层放置一个div标签，然后在服务器端根据Excel文件的首行生成select标签的html代码，在前台页面中用Ajax获取到该html代码后，通过更新上层div的innerHTML的方法，实现select标签内容的显示，问题终于得到解决。

经验总结

浏览器的兼容性一直都是从事前端设计不可避免的问题，而IE浏览器不同版本间的差异也很大，在开发完成后，应使用多个浏览器进行测试。本次是查阅了微软的相关文档才顺利解决问题，现将这次的故障排查过程分享给大家，希望对大家以后解决此类问题有所帮助。