Z-index не работает в Internet Explorer с pdf в iframe

Я не могу получить z-index, работающий над iframe, который содержит файл PDF с IE8. Он работает с 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;
}

ОТВЕТЫ

Ответ 1

Обновление: у Мэтью Уайза есть действительно умное альтернативное решение, которое вы должны рассмотреть, особенно если у вас проблемы с моим подходом или вам не нравятся уродливые хаки!

Есть способ покрыть оконные элементы в IE другими элементами, но вам это не понравится.

Фон: оконные и безоконные элементы

В устаревшем IE элементы делятся на два типа: оконные и безоконные.

Обычные элементы, такие как div и input имеют окон. Они отображаются самим браузером в одной плоскости MSHTML и соответствуют друг другу z-порядку.

Элементы, отображаемые за пределами MSHTML, являются оконными; например, select (отображается ОС) и элементы управления ActiveX. Они уважают друг друга по z-порядку, но занимают отдельную плоскость MSHTML, которая нарисована поверх всех элементов без окон.

Единственное исключение - iframe. В IE 5 iframe был оконным элементом. Это было изменено в IE 5.5; теперь это элемент без окон, но по причинам обратной совместимости он все равно будет рисовать над оконными элементами с более низким z-индексом

Другими словами: iframe учитывает z-index как для оконных, так и для безоконных элементов. Если вы iframe на оконный элемент, все безоконные элементы, расположенные над iframe будут видны!

Что это значит

PDF всегда будет рисоваться поверх обычного содержимого страницы - как 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]-->

Ответ 2

Обходной путь с дополнительным IFRAME работает в простых случаях, но я провел утро, пытаясь получить оверлей для соблюдения прозрачности. По сути, в нашем приложении есть модальные всплывающие окна, в результате чего полноэкранное наложение за всплывающими окнами отображается серым цветом (черный фон, непрозрачность 0,25), чтобы указать пользователю, что всплывающие окна являются модальными. С помощью обходного пути, встроенное представление PDF никогда не становится серым с остальной частью окна, поэтому все еще выглядит "активным", и вы действительно можете взаимодействовать со средством просмотра PDF.

Наше решение заключается в использовании библиотеки Mozilla pdf.js: https://github.com/mozilla/pdf.js/ - встраивание IFRAME, указывающего на тестовый URL http://mozilla.github.com/pdf.js/web/viewer.html? file =ressed.tracemonkey-pldi-09.pdf работает прямо из коробки, соблюдая z-index, прозрачность, много, никаких взломов не требуется! Похоже, что они используют свой собственный механизм рендеринга, который генерирует стандартный HTML, представляющий содержимое PDF.

Ответ 3

Я пытался исправить ту же проблему, и мой сценарий был похож. Я пытался отобразить видео на YouTube, а в верхней части видео я хотел разместить некоторые div с некоторой информацией.

Но видео youtube, содержащееся в iframe, не позволяло мне это делать. Независимо от z-index, который я дал элементам.

Затем этот пост помог - fooobar.com/questions/46969/...

В основном это о wmode. Проверьте вышеприведенную запись, чтобы узнать, как с ней работать.

Вот какой код из этого сообщения:

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

или

//Fix z-index встраивание видео youtube

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

Ответ 4

Для тех, кто использует jQueryUI, я предложил следующее решение.

Добавьте следующую функцию и вызовите ее из события открытия ваших диалогов. Если ваш браузер 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);
    }
});