59

我无法使用 IE8z-index处理iframe包含 pdf 文件的文件。它适用于谷歌浏览器。

示例（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;
}
4

4 回答 4

90

更新： Matthew Wise 有一个非常聪明的替代解决方案，您应该考虑它——尤其是如果您对我的方法有疑问或不喜欢丑陋的黑客攻击！

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

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

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

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

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

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

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

这意味着什么

PDF 将始终绘制在常规页面内容之上—<a href="http://blogs.msdn.com/b/ie/archive/2006/01/17/for-the-select-few.aspx " rel="noreferrer">类似select元素直到 IE 7。修复方法是iframe在您的内容和 PDF 之间放置另一个元素。

演示

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]-->
于 2012-10-19T15:07:56.087 回答
8

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

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

于 2016-08-16T12:36:04.503 回答
4

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

但是包含在一个中的 youtube 视频iframe并没有让我这样做。不管
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");
  });
});
于 2013-10-30T13:56:14.660 回答
0

对于那些使用 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);
    }
});
于 2019-07-12T16:31:21.597 回答