web-dev-qa-db-ja.com

i-frameでPDFを使用すると、Internet Explorerでz-indexが機能しない

私は得ることができない z-index IE8でpdfファイルを含むiframeで作業しています。 Google Chromeで動作します。

例（ 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;
}
cssinternet-explorerpdfiframez-index
57
Corinne Kubler

Update：Matthew Wiseには本当に賢い代替ソリューションがあります 考慮する必要があります-特にあなたが持っている場合私のアプローチの問題やtroubleいハックが嫌い!

IEのウィンドウ要素を他の要素でカバーする方法がありますが、好きではありません。

背景：ウィンドウ要素とウィンドウなし要素

レガシーIE要素を2つのタイプに分類します：ウィンドウ表示とウィンドウなし。

divやinputなどの通常の要素は、windowlessです。それらはブラウザ自体によって単一のMSHTMLプレーンにレンダリングされ、互いのzオーダーを尊重します。

MSHTMLの外部でレンダリングされる要素はwindowed;たとえば、select（OSによってレンダリングされる）およびActiveXコントロール。それらは互いのzオーダーを尊重しますが、すべてのウィンドウレス要素の上にペイントされる別個のMSHTMLプレーンを占有します。

唯一の例外はiframeです。 IE 5、iframeはウィンドウ要素でした。これは changed in IE 5.5 ;現在はウィンドウレス要素ですが、下位互換性の理由から、より低いz-indexのウィンドウ要素を描画します

つまり、iframeは、ウィンドウ要素とウィンドウなし要素の両方のz-indexを尊重します。ウィンドウ要素の上にiframeを配置すると、iframeの上に配置されたウィンドウなし要素が表示されます！

これが意味すること

PDFは常に通常のページコンテンツの上部に描画されます- select要素のように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]-->
87
Jordan Gray

追加のIFRAMEを使用した回避策は単純なケースで機能しますが、透明度を尊重するようにオーバーレイを取得しようと朝まで過ごしました。基本的に、アプリケーションにはモーダルポップアップがあり、ポップアップの背後にあるフルウィンドウオーバーレイが「グレーアウト」（背景色は黒、不透明度0.25）でレンダリングされ、ポップアップがモーダルであることをユーザーに示します。回避策により、埋め込まれたPDFビューはウィンドウの残りの部分でグレー表示されないため、まだ「アクティブ」に見え、実際にPDF =ビューアー。

私たちの解決策は、Mozillaのpdf.jsライブラリを使用することです。 https://github.com/mozilla/pdf.js/ -テストURLを指すIFRAMEの埋め込み http：// mozilla .github.com/pdf.js/web/viewer.html？file = compressed.tracemonkey-pldi-09.pdf z-index、透明性、ロット、ハッキングの必要なしに、箱から出してすぐに動作します！ PDFのコンテンツを表す標準HTMLを生成する独自のレンダリングエンジンを使用しているようです。

5
Matthew Wise

私は同じ問題を修正しようとしていましたが、私のシナリオは似ていました。私は自分のページに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
Vishnu Narang

JQueryUIを使用している人のために、次のソリューションを思い付きました。

次の関数を追加し、ダイアログのopenイベントから呼び出します。ブラウザがIEの場合、iFrameをモーダルオーバーレイに挿入するか、ダイアログの背景に追加します。

// 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);
    }
});
0
AnthonyVO