现象: 同事之间几个IE 测试情况下,有的报这个错,有的不报。经查询资料后,可归纳以下原因。
1. 有未关闭的 html 标签,比如 <table> 而没有 </table>
2. 在页面未加载完前 js 代码操作了 body 里的元素,将相关 js 代码移到 </body> 后面
我这里的原因是进行了某些 DOM 操作发生在 DOM 树加载完成之前,有 appendChild
<html> <head> </head> <body> <div> <script type="text/javascript"> alert(document.readyState); var oDiv = document.createElement("DIV"); oDiv.innerHTML = 'test odiv test odiv'; document.body.appendChild(oDiv); </script> </div> </body> </html>
---------------------------------------------------------------------------------------------------------------------------------
当解析到 DIV 时就开始在 BODY 上 appendChild ,而这个时候 BODY 是还没有完全就绪的( It is not fully loaded ),文档结构仍在 loading 和 interactive 状态之间,于是,便会得到上述错误
解决办法:
要解决这个问题,可以进行 document.readyState 状态判断,当它为 complete 时再进行相应的操作
if (document.readyState=="complete") { createDiv (); } else { document.onreadystatechange = function(){ if (document.readyState == "complete") { createDiv (); } } } function createDiv() { var oDiv = document.createElement("DIV"); oDiv.innerHTML = 'test odiv test odiv'; document.body.appendChild(oDiv); }
onreadystatechange :
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0 - UNINITIALIZED : XML 对象被产生,但没有任何文件被加载。
1 - LOADING :加载程序进行中,但文件尚未开始解析。
2 - LOADED :部分的文件已经加载且进行解析,但对象模型尚未生效。
3 - INTERACTIVE :仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
4 - COMPLETED :文件已完全加载,代表加载成功。