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