web-dev-qa-db-fra.com

z-index ne fonctionne pas dans Internet Explorer avec pdf dans iframe

Je ne peux avoir z-index travail sur un iframe contenant un fichier pdf avec IE8. Cela fonctionne avec Google Chrome.

Exemple ( 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

Mise à jour: Matthew Wise a une solution alternative vraiment intelligente que vous devriez considérer, surtout si vous rencontrez problème avec mon approche ou déteste les hacks laids !

Il existe un moyen de couvrir les éléments fenêtrés dans IE avec d'autres éléments, mais vous n'allez pas l'aimer.

Arrière-plan: éléments fenêtrés et sans fenêtre

Legacy IE classe les éléments en deux types: avec fenêtre et sans fenêtre.

Les éléments réguliers comme div et input sont sans fenêtre . Ils sont rendus par le navigateur lui-même dans un seul plan MSHTML et respectent l'ordre z de l'autre.

Les éléments rendus en dehors de MSHTML sont fenêtrés ; par exemple, select (rendu par le système d'exploitation) et les contrôles ActiveX. Ils respectent l'ordre z de l'autre, mais occupent un plan MSHTML distinct qui est peint au-dessus de tous les éléments sans fenêtre.

La seule exception est iframe. Dans IE 5, iframe était un élément fenêtré. C'était changé en IE 5.5 ; il est maintenant un élément sans fenêtre, mais pour des raisons de compatibilité ascendante, il restera sur les éléments fenêtrés avec un indice z inférieur

En d'autres termes: iframe respecte le z-index pour les éléments fenêtrés et sans fenêtre . Si vous positionnez un iframe sur un élément fenêtré, tous les éléments sans fenêtre positionnés sur le iframe seront visibles!

Qu'est-ce que cela signifie

Les éléments PDF seront toujours peints au-dessus du contenu normal de la page — comme select les éléments étaient jusqu'à IE 7 =. Le correctif consiste à positionner un autre iframe entre votre contenu et le PDF.

Démo

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

Code

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;
}

Soutien

Cela a été testé et devrait fonctionner dans IE 7–9. Si vous vous sentez persistant à ce qu'il apparaisse dans le DOM pour d'autres navigateurs, vous pouvez l'ajouter avec JavaScript ou l'envelopper dans un IE- seul commentaire conditionnel:

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

La solution de contournement avec l'IFRAME supplémentaire fonctionne dans des cas simples, mais j'ai passé une matinée à essayer d'obtenir la superposition pour respecter la transparence. Fondamentalement, notre application possède des fenêtres contextuelles modales par lesquelles une superposition pleine fenêtre derrière les fenêtres contextuelles est rendue "grisée" (couleur d'arrière-plan noire, opacité 0,25) pour indiquer à l'utilisateur que les fenêtres contextuelles sont modales. Avec cette solution de contournement, la vue intégrée PDF n'est jamais grisée avec le reste de la fenêtre, elle semble donc toujours "active" et, en effet, vous pouvez toujours interagir avec le PDF = spectateur.

Notre solution consiste à utiliser la bibliothèque pdf.js de Mozilla: https://github.com/mozilla/pdf.js/ - incorporant un IFRAME pointant vers le URL de test http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf fonctionne tout droit sorti de la boîte en respectant le z-index, la transparence, le lot, aucun hacks requis! Semble qu'ils utilisent leur propre moteur de rendu qui génère du HTML standard représentant le contenu du PDF.

5
Matthew Wise

J'avais essayé de résoudre le même problème et mon scénario était similaire. J'essayais de rendre une vidéo YouTube sur ma page et au-dessus de la vidéo, je voulais placer un div avec quelques informations.

Mais la vidéo YouTube contenue dans un iframe ne me permettait pas de le faire. Quel que soit le
z-index que j'ai donné aux éléments.

Ensuite, ce message a aidé - https://stackoverflow.com/a/9074366/1484384

Fondamentalement, il s'agit du wmode. Consultez le post ci-dessus pour voir comment l'utiliser.

Voici un code de ce post:

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

Ou

// Correction de l'intégration de la vidéo YouTube sur z-index

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

Pour ceux qui utilisent jQueryUI, j'ai trouvé la solution suivante.

Ajoutez la fonction suivante et appelez-la à partir de l'événement ouvert de vos boîtes de dialogue. Si votre navigateur est IE il va insérer un iFrame dans la superposition Modal ou bien l'ajouter à l'arrière-plan de la boîte de dialogue.

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

Vous l'appelleriez alors comme suit ..

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