3

私の仕事（イントラネット）では、多くのIframe（すべて私たちのもの）を持つaspxページがあります。

各iframeはbtnXによって設定（js / jquery）されています（aspxページには多くのボタンがあります... srcをiframeに設定するものとしないものがあります）。

ここに画像の説明を入力

注意: progrssBAr はメイン ページにあります...

目標：iframeの読み込み中のprogressBar...

code : (最初myPageWrapperはdisplay:none)

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

2 問題 :

  • iframes のロード終了イベントを聞くことができます。しかしshowing、ProgfressBar はどうですか? すべての btn のイベント「onclick」を編集したくない - [jquery を使用して] これに対する一元化されたソリューションはありますか?

私は何かが必要です:

"btn がsrcを iframe に設定した場合 - 表示myProgressBar"

  • 同時イベントが発生する可能性があります：iframe Aは2分間ロードされています（例）-進行状況バーが表示され、その間src、iframe Bに設定されている他のボタンを押しました -非常に高速にロードされています...ロードされると-非表示になりますProgressBar (私のコードを見てください) -しかし、そうすべきではありません... まだ終わっていません....
4

1 に答える 1

12

コードが更新されました

  • 注: 私は3つの賛成票を受け取ったので、このコードは元のOP以外の誰かを助けていると思います。これまでのところ、OPと私は彼の問題が彼のコードのどこかにあることを発見したので、最初の意図を反映するようにコードを更新することにしました。

デモ: http://so.lucafilosofi.com/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);
于 2012-05-01T16:41:04.527 に答える