web-dev-qa-db-fra.com

Fond transparent iframe

Mon application a une boîte de dialogue modale avec un iframe à l'intérieur. J'ai écrit mon code jQuery de telle sorte que lorsque la boîte de dialogue s'ouvre, elle 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, l'iframe apparaît clairement sous la forme d'une boîte blanche. Je préfère que l'iframe ait un fond transparent.

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

iframebackgroundtransparent
39
brianjcohen

Je l'ai utilisé pour créer un 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 sur la véritable URL.

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

cela pourrait fonctionner (si vous mettez dans l'iframe) avec

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

Définissez la couleur d'arrière-plan du src sur aucune 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 la façon dont tout le monde le fait.

2
Tropilac

Pourquoi ne pas simplement charger le cadre hors écran ou masqué, puis l'afficher une fois qu'il a terminé de charger. Vous pouvez afficher une icône de chargement à sa place pour informer immédiatement l'utilisateur du chargement.

1
Jacob Wyke