CODEWITHSUNDEEP
javascriptjqueryhtmliframeload
456543646346
456543646346

Reputation: 993

Loading text while iframe is loading

I have a script that will display a loading text while the content of the iframe is loaded. The first time i open the page, it will work perfectly. But on this page i have links that will be launched inside the iframe, and the loading text is not displayed for those links :(

it will work the first time you load the page, but if you click on "TEST LINK" the loading text won't be displayed :(

Note: the iframe is loading an EXTERNAL domain

How can i fix that ?

Thanks a lot

Upvotes: 2

Views: 4426

Answers (2)

Ewen
Ewen

Reputation: 401

I am going to give you a jquery solution as you tagged it as such.

The solution code is located at http://jsfiddle.net/nPWAp/1/ however the HTML is 

<body>
<div>
   <a href="#" id="testlink">TEST LINK</a>
</div>
<iframe id="frame"></iframe>
<div id="statement"></div>
</body>

and the jQuery is 

$(document).ready(function() {
    $("#testlink").click(function() {
      // --- set statement -- 
      $("#statement").show();  // show the div in case it was hidden.     
      $("#statement").text("Loading content..."); // replace the text
      $("#statement").hide(5000); // hide after 5 seconds

      // --- Scrape content --- //        
      $("#frame").attr('src', "http://www.test.com");
    });
});

add a dash of CSS

#frame{
wdith: 100%
height: 50em;
border: 1px solid #ccc;
}

and it should all purr. Obviously you will want to check out jquery for some funkier options.

HTH

Upvotes: 1

Erenor Paz
Erenor Paz

Reputation: 3161

You could try putting an on-click event on the link, so everything someone clicks it, the image "Page is loading.." will be shown, and the hided by the already--there "hideProgress()" function.

Something like:

<a href="http://www.perdu.com" target="iframe" onClick="document.getElementById('loader').style.display = 'block';">TEST LINK</a><br>

Something like this: http://jsfiddle.net/SFjS2/ (remember, the second page is loaded VERY fast, so the "Page Loading" image will not be seen easily..try putting some more things there :P)

Upvotes: 5

Related Questions