解决IE的KB927917问题

最新推荐文章于 2019-07-26 11:52:18 发布

最新推荐文章于 2019-07-26 11:52:18 发布 · 441 阅读

文章标签：

#IE #JavaScript #浏览器 #脚本 #Opera #ViewUI

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Internet Explorer中特有的脚本错误：无法在子元素关闭前修改其父容器元素。该问题常见于appendChild及innerHTML操作。文章提供了几种解决方法，如使用defer属性等。

页面错误提示：[b]Unable to modify the parent container element before the child element is closed (KB927917)[/b]

简单描述：子HTML元素内包含试图修改子容器的父容器元素的脚本。

这个问题是伟大的浏览器IE发现的，各大浏览器没有这种反馈，原因就是解析的JavaScript的机制不同。这个问题一直到IE8还是存在，估计一直也存在。因为解析JavaScript的解析IE是边读边执行的，所以如果脚本允许修改父元素，并且子元素又没关闭的话，会失去条理性。

首先是微软的详细解释：http://support.microsoft.com/kb/927917

而网上一般发生的情况都是在appendChild或者是innerHTML，例如下面的例子：

<html> 
<body> 
  <div>
   <script type="text/javascript">
var newElem = document.createElement('foo');
    document.body.appendChild(newElem);
   </script>
  </div>
</body>
</html>

但我遇到的却提示在：

		var isKonqueror = /KHTML/.test(navigator.userAgent);
		var isIE = ( /MSIE/.test(navigator.userAgent) && !/(Opera|Gecko|KHTML)/.test(navigator.userAgent) );
		var iframe = document.createElement("iframe");
		iframe.style.width = "100%";
		iframe.style.height = "20px";
		iframe.style.overflowX = "auto";
        iframe.scrolling = "no";
		iframe.marginWidth = 0;
		iframe.marginHeight = 0;
		iframe.border = 0;
		iframe.frameBorder = 0;
		iframe.style.border = "none";
		function resizeAndNullIframe() { resizeIframe(); iframe = null;};
		function resizeIframe() {
			if (iframe !=null) {
				var w = iframe.offsetWidth, b = iframe.contentWindow.document.body;
                if (b.scrollWidth > w) {
					b.style.overflow = "auto";
					b.style.width = w + "px";
				} else {
					iframe.style.width = b.scrollWidth -20 + "px";
				}
                    var i_frame = iframe;
                //alert(b.scrollHeight+"|"+iframe.offsetHeight);
                var _delay = isIE ? 300 : 0 ;
                setTimeout(function(){ i_frame.style.height = b.scrollHeight + 30 + "px";}, _delay);
            }
		};
		document.getElementById("iframeBody1").appendChild(iframe);

iframeBody1为存放此段代码的容器ID。最大嫌疑的只有document.createElement("iframe")一段，但改起来比较麻烦。

而通过IE Developer调试获得的准确位置是在：

iframe.style.width = b.scrollWidth -20 + "px";

虽然看了好久还是不知道原因，调试尝试把这句去掉，依然报错，但是IE Developer已经没有任何提示信息，单纯的报错。

最后想了下，因为是微软独特的问题，又想起微软另外一个独特的属性，"defer"。使用后问题马上迎刃而解了。

这个加入后不用修改原来任何代码，并且兼容各种浏览器了，问题解决。

最后发现其实微软的MSDN上早已列举了解决办法，其中也包括使用defer。貌似又兜了一圈。不到自己为微软叹息，自己搞出来的问题，使用自己的方法解决，最后受苦的还是我们。唉。

具体MSDN地址：[url]http://blogs.msdn.com/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx[/url]

官方给出的解决办法如下：

1. Moving your script execution to a function that is invoked after parsing is complete (e.g., onload)
2. Adding the defer boolean attribute to the script block (this defers execution of the script content until parsing is complete)
3. Limiting your tree modifications to the script-element's immediate parent
4. Moving the location of your script block to a child of the body (this usually solves most problems, while allowing the most flexibility in terms of scenarios).