Iframes loading with progress bar using jQuery?
15,493
CODE UPDATED
-
NOTE:
since i received 3 up-votes i assume that this code is helping someone else other then the original OP; so i decided to update the code to reflect what it was meant to be at the beginning, since so far the OP and i have discovered that his problem was somewhere else in his code.
demo: http://so.lucafilosofi.com/iframes-loading-with-progress-bar-using-jquery/
head of main page
var iframes = [], progress = 0;
$(function() {
$pGressIndex = $('#progress-bar-indicator');
$('#navigation a').click(function() {
var iframe_id = this.hash.split('#')[1];
if (iframes.indexOf(iframe_id) === -1) {
$('#log').prepend('<p><strong>' + iframe_id + '</strong> is loading!</p>');
iframes.push(iframe_id);
if (parseInt($pGressIndex.width()) == 960) {
$pGressIndex.removeAttr('style');
}
var fW = (iframes.length > 1) ? (660 - (20 * iframes.length ) ) : 660;
$pGressIndex.animate({
width : fW
}, 5000);
var iframe_page = iframe_id + '.html';
if ($(this.hash).length != 0) {
$(this.hash).remove();
}
$('<iframe>').attr({
id : iframe_id,
src : iframe_page,
frameBorder : 0,
width : 960
}).appendTo('#iframes-wrapper');
}
return false;
});
});
bottom of main page:
window.addEventListener("message", function(e) {
console.log(iframes);
var index = iframes.indexOf(e.data);
iframes.splice(index, 1);
if (iframes.length == 0) {
$pGressIndex.stop(true).animate({
width : 960
}, 100);
}
$('#' + e.data).show();
}, false);
bottom of each iframe page:
top.postMessage('frame-name-or-what-you-want', window.location.href);
Author by
Royi Namir
Updated on June 05, 2022Comments
-
Royi Namir almost 2 years
in my job (intranet)- I have an aspx page which has many Iframes ( all ours).
each iframe is being set(js/jquery) by btnX ( there are many buttons in the aspx page... some set src to iframes - some not).
notice : the progrssBAr is on the main page...
goal : progressBar while iframe is loading...
code : ( at first the
myPageWrapper
isdisplay:none
)$('#myPageWrapper').on ('load','iframe',function () { $("#myProgressBar").hide();});
2 problems :
- i can listen to the iframes load finish event. but what about
showing
the ProgfressBar ? i dont want to edit all btn's event "onclick" - is there any centralized solution to this [using jquery]?
i need something that does :
"when btn sets the
src
to an iframe - showmyProgressBar
"- simultaneous events can occur : iframe A is being loading for 2 min ( example) - so it shows the progress bar , meanwhile i pressed other button which sets
src
to iframe B - which is loading very fast... once its loaded - it hides the ProgressBar ( look at my code) - but it shouldnt...A didnt finish yet....
- i can listen to the iframes load finish event. but what about
-
Royi Namir about 12 yearsI dont have words to appreciate your effort and help. thank you :)
-
Luca Filosofi about 12 years@Royi Namir: i'm going to add some little fix and comment source..! you are welcome and i'm happy that it helped...
-
Royi Namir about 12 yearswhy didnt you listen to the load event for each iframe?
-
Royi Namir about 12 yearsi have currently ( for example) 100 iframe on my page. each is being set a SRC by different button. where is the line which tells me : "someone has set a SRC attr to an iframe " ? do i need to listen to all buttons in page ? **i just need those events who set SRC **
-
Luca Filosofi about 12 yearsyou have to listen all buttons, yes, you basically list the click event, so when someone click a button you know that an iframe is going to be created....
-
Luca Filosofi about 12 yearsi don't use load here, cause in my example load does not respect the setTimeout() i used in the iframe page
-
Luca Filosofi about 12 years
-
Luca Filosofi over 11 years@Royi Namir: the only thing that could expect different behaviour is postMessage call, but seams to be supported enough. (but this is subjective ) read: caniuse.com/#feat=x-doc-messaging.