Windows 7上的IE11在关闭div后显示白屏

Question

我有一个带有 iframe 的 div，它可以加载 pdf 文件。单击pdf图标时会出现它，并且有一个标签“X”，单击该标签将隐藏div（onclick事件，只需将显示更改为阻止）。但是当试图关闭 div 时，加载的页面也消失了，你看到的只是白屏。我必须按 F12 才能使页面再次出现。该页面应该在 Firefox、Chrome 和 Safari 中运行，我只在 IE9-IE11 中遇到此问题或行为。但奇怪的是，当我使用 BrowserStack 测试页面时，browserstack 一切正常。知道为什么会这样吗？

<div class="pdf-file" style="display: none;"> 
    <label>X</label>
    <iframe src="blah" scrolling="no" width=400 height=400 class="pdf-class"></iframe>
</div>

请注意，这个div的位置是绝对的。

点击事件：

$('#pdf img).click(function() {
    $('.pdf-file').show();
}

$('.pdf-file label).click(function() {
    $('.pdf-file').hide();
}

javascripts 和上面一样简单，并且这种行为最近才发生，我不明白为什么，我不记得在页面中更改了导致这种行为的重大内容，它之前运行良好。

Answer 1

在搜索了有关手头问题的更多信息后，我遇到了这个 stackoverflow 主题 Blank iFrame in IE，它让我知道 iframe 可能是我的问题，所以我将 iframe 更改为对象，这在 IE 中起到了作用。希望这会有所帮助。

Answer 2

在我处理的一个应用程序中，我们在过去几天内刚刚遇到了这个问题。经过多次讨论，我们想出了一个权宜之计。

首先，我们有一些不同之处——我们的情况并不像上面的那么简单。我们正在将 PDF 加载到 iFrame 中，但该 iFrame 位于 UI Bootstrap 模式中。当我们点击模态框上的取消按钮时，我们得到了一个 WSOD，这会导致模态实例关闭，并且还会导致模态本身从 DOM 中删除。

解决方法是从这里开始：

function cancel() {
    $uibModalInstance.dismiss('Cancelled.');
}

...至此：

function cancel() {
    var $modal = $('div.modal-dialog');
    $modal.css('display', 'none');

    $uibModalInstance.dismiss('Cancelled.');
}

您可能应该调用$('.pdf-file').css('display', 'none');，而不是调用$('.pdf-file').hide()。