Loading iframes with progress bar using jQuery?

Question

in my work (intranet). I have an aspx page that has a lot of iframes (all ours).

each iframe is installed (js / jquery) by btnX (there are many buttons on the aspx page ... some src set for iframes - some not).

notice: progrssBAr is on the main page ...

target: progressBar while iframe is loading ...

code: (first myPageWrapperis display:none)

$('#myPageWrapper').on ('load','iframe',function () { $("#myProgressBar").hide();});

2 problems:

• I can listen to the iframes download completion event. but what about the showingprogfressbar? I don't want to edit all btn "onclick" events - is there any centralized solution for this [using jquery]?

I need something that does:

", btn src iframe-show myProgressBar"

• : iframe A 2 () - , , src iframe B - ... - ProgressBar ( ) - , ... A didnt ....

Answer 1

• : , 3 , , - , OP; , , , OP , - .

demo: http://so.devilmaycode.it/iframes-loading-with-progress-bar-using-jquery/

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

:

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

iframe:

           top.postMessage('frame-name-or-what-you-want', window.location.href);