Iframes loading with progress bar using jQuery?

html, iframe, javascript, jquery, progress-bar

Solution

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

Problem

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` is `display: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 - show `myProgressBar`" - 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....

Original source