z-index 在 iframe 中带有 pdf 的 Internet Explorer 中不起作用答案

【问题标题】：z-index does not work in Internet Explorer with pdf in iframez-index 在 iframe 中带有 pdf 的 Internet Explorer 中不起作用
【发布时间】：2012-10-06 08:38:11
【问题描述】：

我无法让z-index 处理包含带有 IE8 的 pdf 文件的 iframe。它适用于谷歌浏览器。

示例 (JSFiddle)：

HTML

<div id="div-text">
      <div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
    <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>

CSS

#div-text{
    position:relative;
    left:210px;
    top:20px
}

#shouldBeOnTop{
    position:relative;
    right:60px;
    background-color:red;
    width:100px;
    z-index:2;
}

#div-frame{
    position:relative;
     z-index:1;
}

【问题讨论】：

就像stackoverflow.com/questions/12407194/…中讨论的同一问题
请注意，JSFiddle 示例中使用的 PDF 链接会返回一个自定义 404 错误页面，在该示例中，您不会知道它的小视口不是 PDF 文件。我不明白为什么，在玩那个例子时，当我指向我想要查看的实际生成的 PDF 文件时，我得到了不同的结果！
我也有同样的问题。

标签： css internet-explorer pdf iframe z-index

【解决方案1】：

更新： Matthew Wise has a really clever alternative solution 你应该考虑一下——尤其是如果你对我的方法有问题或不喜欢丑陋的黑客攻击！

有一种方法可以用其他元素覆盖 IE 中的窗口元素，但你不会喜欢它。

背景：窗口元素和无窗口元素

旧版 IE 将元素分为两种类型：有窗口的和无窗口的。

div 和 input 等常规元素是无窗口。它们由浏览器本身在单个 MSHTML 平面中呈现，并尊重彼此的 z 顺序。

在 MSHTML 之外呈现的元素是 windowed；例如，select（由操作系统渲染）和 ActiveX 控件。它们尊重彼此的 z 顺序，但占用一个单独的 MSHTML 平面，该平面绘制在所有无窗口元素的顶部。

唯一的例外是iframe。在 IE 5 中，iframe 是一个窗口元素。这是changed in IE 5.5；它现在是一个无窗口元素，但出于向后兼容性的原因，它仍会在具有较低 z-index 的窗口元素上绘制

换句话说：iframe 尊重窗口元素和无窗口元素的 z-index。如果您将 iframe 放置在窗口元素上，则任何位于 iframe 上的无窗口元素都将可见！

这是什么意思

PDF 将始终绘制在常规页面内容的顶部 —like select elements were until IE 7。解决方法是在您的内容和 PDF 之间放置另一个 iframe。

演示

jsFiddle：http://jsfiddle.net/Jordan/gDuCE/

代码

HTML：

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS：

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

支持

这已经过测试，应该可以在 IE 7-9 中运行。如果您对它在其他浏览器的 DOM 中显示感到挑剔，您可以使用 JavaScript 添加它或将其包装在仅限 IE 的条件注释中：

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

【讨论】：

是否有特定的属性需要调查以查看是否会触发此功能（例如 $.support 或 modernizr 属性）？
我可能会补充一点，在对此进行测试之后，它在 IE11 中也同样有效，因为我们花了很长时间让 jQuery UI 模态显示在 iframe 中的 pdf 上。唯一的潜在问题是页面滚动时模态闪烁，如上所述，但至少它可以工作。
也许我做错了，但是使用这个解决方案，我可以在 PDF 上看到我的 div，但我无法与之交互（例如点击事件），因为 iFrame 挡住了路.
@JordanGray 原来我的“内部”div 被我的“封面”iframe 覆盖了，我提高了它的 z-index 并且得到了想要的结果。谢谢。
有窗口和无窗口，我今天学到了一些关于 IE 的可怕的东西。万岁铬。

【解决方案2】：

附加 IFRAME 的解决方法在简单的情况下确实有效，但我花了一个上午的时间试图让叠加层尊重透明度。基本上，我们的应用程序具有模态弹出窗口，其中弹出窗口后面的全窗口覆盖呈现为“灰色”（背景颜色为黑色，不透明度 0.25），以向用户指示弹出窗口是模态的。使用该解决方法，嵌入的 PDF 视图永远不会与窗口的其余部分一起变灰，因此看起来仍然是“活动的”，实际上您仍然可以与 PDF 查看器进行交互。

我们的解决方案是使用 Mozilla 的 pdf.js 库：https://github.com/mozilla/pdf.js/ - 嵌入一个指向测试 URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf 的 IFRAME 可以直接使用 z-index、透明度、批次，无需破解！似乎他们使用自己的渲染引擎生成代表 PDF 内容的标准 HTML。

【讨论】：

这是一个非常新颖的解决方案，马特——希望它更突出！
请注意，根据github.com/mozilla/pdf.js/wiki/…，从 2.6.347 版起，IE 将不再受支持

【解决方案3】：

我一直在尝试解决同样的问题，我的情况也很相似。我试图在我的页面上呈现一个 youtube 视频，我想在视频顶部放置一些 div 和一些信息。

但是包含在iframe 中的 youtube 视频不允许我这样做。不管我给元素的
z-index 是什么。

然后这篇文章有帮助 - https://stackoverflow.com/a/9074366/1484384

基本上是关于wmode。查看上面的帖子以了解如何使用它。

这是该帖子中的一些代码：

<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">

或者

//修复 z-index youtube 视频嵌入

$(document).ready(function (){
  $('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
  });
});

【讨论】：

【解决方案4】：

对于那些使用 jQueryUI 的人，我想出了以下解决方案。

添加以下函数并从对话框的打开事件中调用它。如果您的浏览器是 IE，它会将 iFrame 插入到 Modal 叠加层中，或者将其添加到对话框背景中。

// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");

// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
    setTimeout(function () {
        if (event && event.target && isIE) {
            var $dialog = $(event.target.parentElement);
            // Get the modal overlay if found.
            var $fixTarget = $dialog.next('.ui-widget-overlay');
            // Use the dialog body if there is no overlay.
            if (!$fixTarget || !$fixTarget.length)
                $fixTarget = $dialog;
            // Add as first child so it is covered by all of the other elements
            $fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
        }
    }, 10);
}

然后你可以这样称呼它..

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});

【讨论】：