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!
The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page. A transparent iframe can be made by setting its background to transparent. And, the allowtransparency attribute of “iframe” is to be set as “true”.
Set background-color: transparent; and do not use opacity , as that is what makes semi-transparent the whole div.. I meant the that background-color should be semi transparent. In my example, the black background should be semi-transparent (according to opacity).
IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.
Use the object Tag as an Alternative to Iframe in HTML We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc.
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.
<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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With