How to display downloadable message when iFrame loads?

Question

I have an iframe that loads a third-party website that loads very slowly.

Is there a way to show the loading message while the iframe is loading the user, doesn't see a big space?

PS. Please note that the iframe is for a third-party site, so I cannot change / enter anything on their page.

Answer 1

I made the following CSS approach:

<div class="holds-the-iframe"><iframe here></iframe></div> .holds-the-iframe { background:url(../images/loader.gif) center center no-repeat; } 

Answer 2

I think this code will help:

JS:

 $('#foo').ready(function () { $('#loadingMessage').css('display', 'none'); }); $('#foo').load(function () { $('#loadingMessage').css('display', 'none'); }); 

HTML:

 <iframe src="http://google.com/" id="foo"></iframe> <div id="loadingMessage">Loading...</div> 

CSS:

 #loadingMessage { width: 100%; height: 100%; z-index: 1000; background: #ccc; top: 0px; left: 0px; position: absolute; } 

Answer 3

If this is just the placeholder you are trying to achieve: a crazy approach is to embed text as an svg background. This allows some flexibility, and from what I read, browser support should be pretty decent (although I haven't tested this):

• Chrome> = 27
• Firefox> = 30
• Internet Explorer> = 9
• Safari> = 5.1

HTML:

 <iframe class="iframe-placeholder" src=""></iframe> 

CSS:

 .iframe-placeholder { background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat; } 

What can you change?

Inside the background value:

• font size: look for font-size = "" and change the value to whatever

• Font color: look for padding = "" . Remember to replace # with% 23 if you use a hexadecimal color notation. % 23 denotes the URL encoding #, which is necessary to be able to parse the svg string in FireFox.

• font family: look for font-family = "" do not forget to avoid single quotes if you have a font consisting of several words (for example, with \ 'Lucida Grande \')

• text: find the value of the text-element in which you see the string PLACEHOLDER . You can replace the PLACEHOLDER string with anything that matches the URL (special characters must be converted to a percentage record)

Violin example

Pros:

• No extra HTML elements
• No js
• The text can be easily (...) adjusted without the need for an external program
• This is an SVG, so you can easily put any SVG there.

Minuses:

• Browser support
• It's complicated
• This is a hacker.
• If iframe-src does not have a background set, the placeholder will show through (which is not inherent to this method, but only to standard behavior when you use bg in an iframe)

I would recommend this only if it is absolutely necessary to display the text as a placeholder in an iframe, which requires a bit of flexibility (multiple languages, ...). Just take a moment and think: is all this really necessary? If I had a choice, I would choose the @Christina method

Answer 4

 $('iframe').load(function(){ $(".loading").remove(); alert("iframe is done loading") }).show(); <iframe src="http://www.google.com" style="display:none;" width="600" height="300"/> <div class="loading" style="width:600px;height:300px;">iframe loading</div> 

Answer 5

Here is a quick fix for most cases:

CSS:

 .iframe-loading { background:url(/img/loading.gif) center center no-repeat; } 

You can use animated GIF downloads if you want,

HTML:

 <div class="iframe-loading"> <iframe src="http://your_iframe_url_goes_here" onload="$('.iframe-loading').css('background-image', 'none');"></iframe> </div> 

Using the onload event, you can remove the boot image after loading the original page inside your iframe.

If you are not using jQuery, just put the id in the div and replace this part of the code:

 $('.iframe-loading').css('background-image', 'none'); 

more or less like this:

 document.getElementById("myDivName").style.backgroundImage = "none"; 

All the best!

Answer 6

Yes, you can use a transparent div located above the iframe area, with the gif loader as the only background.

Then you can attach the onload to the iframe:

  $(document).ready(function() { $("iframe#id").load(function() { $("#loader-id").hide(); }); }); 

Answer 7

 <!DOCTYPE html> <html> <head> <title>jQuery Demo - IFRAME Loader</title> <style> #frameWrap { position:relative; height: 360px; width: 640px; border: 1px solid #777777; background:#f0f0f0; box-shadow:0px 0px 10px #777777; } #iframe1 { height: 360px; width: 640px; margin:0; padding:0; border:0; } #loader1 { position:absolute; left:40%; top:35%; border-radius:20px; padding:25px; border:1px solid #777777; background:#ffffff; box-shadow:0px 0px 10px #777777; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div id="frameWrap"> <img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/> <iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=[e-mail]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe> </div> <script> $(document).ready(function () { $('#iframe1').on('load', function () { $('#loader1').hide(); }); }); </script> </body> </html> 

Answer 8

You can use as below

 $('#showFrame').on("load", function () { loader.hide(); }); 

Answer 9

I took the following approach

First add a native item

 $('<div class="loading"></div>').insertBefore("#Iframe"); 

and then when the frame finishes loading

 $("#Iframe").load(function(){ $(this).siblings(".loading-fetching-content").remove(); });