Fond transparent de l'iframe

Question

Mon application comporte une boîte de dialogue modale avec une iframe à l'intérieur. J'ai écrit mon code jQuery de telle sorte que lorsque la boîte de dialogue s'ouvre, il définit l'attribut "src" approprié de l'iframe afin que le contenu se charge. Cependant, pendant le délai entre l'ouverture de la boîte de dialogue et le chargement du contenu, la iframe apparaît ostensiblement comme une boîte blanche. Je préférerais que l'iframe ait un arrière-plan transparent.

J'ai essayé de définir allowtransparency="yes" sur l'iframe. Avez-vous des idées ? Merci !

Answer 1

J'ai utilisé cette méthode pour créer une IFrame via Javascript et cela a fonctionné pour moi :

// IFrame points to the IFrame element, obviously
IFrame.src = 'about: blank';
IFrame.style.backgroundColor = "transparent";
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";

Je ne sais pas si cela fait une différence, mais j'ai défini ces propriétés avant d'ajouter l'IFrame au DOM. Après l'avoir ajouté au DOM, j'ai défini son src à l'URL réelle.

Answer 2

<style type="text/css">
body {background:none transparent;
}
</style>

qui pourrait fonctionner (si vous mettez le iframe) ainsi que

<iframe src="stuff.htm" allowtransparency="true">

Answer 3

Définissez la couleur d'arrière-plan de la src à none et autorisez la transparence.

[WITHIN SCR PAGE STYLE]
<style type="text/css">
    body
    {
        background:none transparent;
    }
</style>

[IFRAME]
<iframe src="#" allowtransparency="true">Error, iFrame failed to load.</iframe>

REMARQUE : Je code mon CSS un peu différemment de ce que font les autres.

Answer 4

Pourquoi ne pas charger le cadre hors écran ou caché et l'afficher une fois le chargement terminé ? Vous pourriez afficher une icône de chargement à sa place pour que l'utilisateur sache immédiatement qu'elle est en cours de chargement.

Answer 5

Vous devez rendre le corps de l'iframe transparent. Cela fonctionne pour moi :

const iframe = document.createElement( 'iframe' );

iframe.onload = function() {
    const doc = iframe.contentWindow.document,
        head = doc.querySelector( 'head' ),
        style = doc.createElement( 'style' );

        style.setAttribute( 'type', 'text/css' );
        style.innerHTML = 'body { background: transparent!important; }';

        head.appendChild( style );
}