IE8 HTML Parsing Error: Unable to modify parent container before child closed 错误排查

IE8 HTML Parsing Error 错误现象

网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; QQDownload 551; SLCC2; .NET CLR 2.0.50727) 时间戳: Wed, 12 Aug 2009 07:02:03 UTC

消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) 行: 0 字符: 0 代码: 0

问题排查与代码分析

今天在调试一段JavaScript代码时遇到了这个报错。该代码在Firefox、IE7以及IE6环境下均能正常运行，但在IE8中却出现异常。经过网络搜索相关资料，发现此类错误通常指向一个核心问题：在指定标签尚未完全加载完毕时，就试图操作该对象。

仔细检查了代码逻辑，从表面结构来看似乎没有任何明显问题。

具体涉及的代码如下：

<body>

<script language="javascript">

var bgObj = document.createElement("div"); bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); </script> </body>

深入分析后发现，这段代码的执行时机存在问题。它在<body>标签尚未闭合、即body元素未完全加载完毕之前就已经运行。

这正是导致错误的根本原因所在。

解决方案：调整脚本执行位置

因此，解决思路是将这段代码的执行位置移出body标签范围。

<body>

</body>

<script language="javascript">

var bgObj = document.createElement("div"); bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); </script>

调整后的代码可以正常运行，问题得以解决。看来IE8在HTML解析逻辑上变得更加严格，这可能导致以往许多在旧版浏览器中看似正常的代码在IE8中出现此类解析错误。