隐藏 DIV 时 IE9 崩溃答案

【问题标题】：IE9 crashes when hiding DIVs隐藏 DIV 时 IE9 崩溃
【发布时间】：2013-08-05 04:55:41
【问题描述】：

注意：抱歉，我还没有支持这篇文章的代码（仅限敏感的生产代码）。如果以后时间允许，我将尝试提供一个简洁的工作示例。我想发表这篇文章，希望它可以为其他人提供追踪类似问题的提示。

使用

Internet Explorer 9。
jQuery 1.9.2 和 2.0.0。
HTML5 文档类型

场景

我将页面拆分为逻辑“屏幕”。
每个屏幕都是一个由类名标识的 DIV（例如“formScreen”、“errorScreen”、“confirmationScreen”）。
“.formScreen”包含表单（数据输入）字段，整个页面有单个提交按钮，该按钮从表单数据生成JSON包并执行AJAX回发。
我“以某种方式”填写表格（我填写表格的顺序似乎有所不同），然后提交。
提交收到响应后，代码会更新显示。

问题

提交后隐藏所有“formScreen”DIV 会导致 IE9 完全崩溃。

原来我定义了一个formScreens变量：

var formScreens = $(".formScreens");

然后再调用：

$(formScreens).hide();

这会导致 IE 崩溃。

我也尝试了以下方法，这两个选项也会导致崩溃：

var copyOfFormScreens = $("div.formScreen");

$(copyOfFormScreens).each(function ()  
{  
    $(this).hide();                   // Option 2: This fails too. 
    $(this).css("display", "none");   // Option 3: This fails too.  
});

IE 崩溃错误

IE崩溃时返回以下内容：

问题签名：问题事件名称：APPRCASH 应用程序名称：IEXPLORE.EXE 应用程序版本：9.0.8112.16496 申请时间戳：51a55c6d 故障模块名称：MSHTML.dll 故障模块版本：9.0.8112.16496 故障模块时间戳：51a55ff0 异常代码：c00000fd 异常偏移量：0032ef01 操作系统版本：6.1.7601.2.1.0.256.48 区域 ID：3081 附加信息 1：39a4 附加信息 2：39a4d7f18c1c7c725934453009d2f1b9 附加信息 3：ddcf 附加信息 4：ddcfafd1b35f05f847ac8d3e7a7bcf12

在 Visual Studio 中调试时如下：

iexplore.exe 中 0x6302EF01 (mshtml.dll) 处的未处理异常：0xC00000FD：堆栈溢出（参数：0x00000001、0x02432F68）。 iexplore.exe 中 0x630A172B (mshtml.dll) 处的未处理异常：0xC0000005：访问冲突写入位置 0x02430FFC。 // 按调试“继续”时继续显示此错误。

【问题讨论】：

仅供参考，这样做有点愚蠢：var formScreens = $(".formScreens");，然后是：$(formScreens).hide();。第二行代码应该只是 formScreens.hide()，因为 formScreens 已经是一个 jQuery 对象。

标签： javascript jquery internet-explorer-9

【解决方案1】：

解决方法/解决方案

我发现了一个非常简单的解决方法。

在隐藏所需元素之前，我将焦点设置到隐藏的 DIV“外部”的元素（即隐藏屏幕 DIV 后仍然可见的元素）。在我的例子中，我将焦点设置在页面中的第一个容器 DIV 上，结果证明它是隐藏 DIV 的祖先。

DIV 布局的外观：

<div class="mainContent">  
  <div class="fromScreen">
  </div>
  <div class="fromScreen">  
  </div>  
  <div class="fromScreen">  
  </div>  
</div>

所以我现在调用的代码是：

$(".mainContent").trigger("focus");  // Call this before the hide.
formScreens.hide();             // Crashes on submit if focus is not set to higher element first.

关键要点

如果隐藏具有在隐藏之前具有焦点的元素的 DIV 会导致问题，请将焦点移到被隐藏的 DIV 之外的元素。

（我的解决方法是受到http://www.3dvia.com/forums/topic/urgent-crash-in-internet-explorer-when-trying-to-hide-the-experience 的第一个回复的启发）

【讨论】：

谢谢！我们在我们的一个内部网站上有代码，它隐藏了主要内容并显示“处理”div，以防止不耐烦的用户继续点击“提交”，并且有时会导致 IE 崩溃。我使用了一种稍微不同的方法来解决这个问题，但你的回答让我到了那里！我在隐藏其父 div 之前模糊了 activeElement，而不是使用此 javascript 更改焦点：if(document.activeElement != null){document.activeElement.blur();}

【解决方案2】：

我也有一个解决方法。如果您将“visibile”CSS 属性显式设置为“Visible”值而不是隐藏外部 div（将 Visible 设置为 Collapse），它会起作用。如果没有这一步，IE 就会崩溃。

但是，此解决方案在其他浏览器中不起作用，因为内部内容仍然可见。所以，我只是简单地检测浏览器类型，而不是在 IE 中将内部 DIV 可见性设置为“可见”，在其他浏览器中设置为“继承”。

IE 的行为很奇怪，因为它会像我最初预期的那样隐藏整个内容，但是逻辑工作是保持内部内容在其他浏览器中可见。

崩溃是IE的bug，IE11也存在。

IE 示例：

<div id="outerDiv">
  <div style="visibility:visible">To hide</div>
</div>

其他浏览器示例：

<div id="outerDiv">
  <div style="visibility:inherit">To hide</div>
</div>

现在将“outerDiv”可见性设置为折叠。

【讨论】：