2

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

Improve this question
1
  • So the problem is that the "loading message" isn't displayed on loading the page in iframe after the click on the link? Commented Oct 14, 2012 at 10:25

2 Answers 2

Reset to default
5

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

Comments