CODEWITHSUNDEEP
iframebackgroundtransparent
brianjcohen
brianjcohen

Reputation: 995

Iframe transparent background

My app has a modal dialog with an iframe inside it. I've written my jQuery code such that when the dialog opens, it sets the appropriate 'src' attribute of the iframe so the content loads up. However, during the delay between the dialog opening and the content loading, the iframe appears conspicuously as a white box. I'd prefer the iframe have a transparent background.

I've tried setting allowtransparency="yes" on the iframe. Any ideas? Thanks!

Upvotes: 51

Views: 135830

Answers (5)

Tropilac
Tropilac

Reputation: 43

Set the background color of the source page to none and allow transparency in the iframe element.

Source page (for example, source.html):

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

Page with iframe:

<iframe src="source.html" allowtransparency="true">Error, iFrame failed to load.</iframe>

Upvotes: 3

WP Punk
WP Punk

Reputation: 1444

You need to make the iframe's body transparently. It works for me:

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

Upvotes: 0

Atom Vayalinkal
Atom Vayalinkal

Reputation: 2692

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

that might work (if you put in the iframe) along with

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

Upvotes: 43

Daniel Magliola
Daniel Magliola

Reputation: 32392

I've used this creating an IFrame through Javascript and it worked for me:

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

Not sure if it makes any difference, but I set those properties before adding the IFrame to the DOM. After adding it to the DOM, I set its src to the real URL.

Upvotes: 65

Jacob Wyke
Jacob Wyke

Reputation: 374

Why not just load the frame off screen or hidden and then display it once it has finished loading. You could show a loading icon in its place to begin with to give the user immediate feedback that it's loading.

Upvotes: 1

Related Questions