0

すべてのコンテンツが iframe 内にある Web アプリケーションを維持しています。その構造の簡単な内訳: (各「-」は新しいレイヤーを表します)

Main page
-iframe container
--iframe q1
--iframe q2
--iframe q3
--iframe q4
--iframe q5

基本的に、メインの iFrame の中に 4 つの iFrame があります。すべての iframe の読み込みが完了したら、画面から削除する必要があるローダー アニメーションがあります。各 iframe には、ページでの選択によって更新されるデータがあります。私が必要としているのは、更新が行われるたびに読み込みアニメーションが画面全体をカバーすることです。これを処理するための最良のアプローチは何ですか? 私はあなたが使用できることを知っています

$('#iframe').on('load',function() {
      //code here...
}

iframe の読み込みがいつ終了したかを判断します。それらすべてを一度にリッスンし、完了したらロードアニメーションをオフにする簡単な方法はありますか? ご協力ありがとうございました。

各 iframe の作成方法は次のとおりです。

var p1HTML = '<div id='p1ContainerBody' class='panelContainerBody'><iframe id='P1ChartFrame' src='' frameborder='0' scrolling='no' style='height: 100%; width: 100%'></iframe></div>'

その後：

if (ConfigData["GlobalOptions"].Quadrants[x].QuadrantId == "1") { $("#q1Container").html(p1HTML); }

4

1 に答える 1

0

2 番目のコード ブロックで説明したように、 Promisefor eachを作成しiframe、リスナーを追加します。loadロード後に load イベントリスナーで Promise を解決しiframeます。すべての読み込みPromise.all()後にアニメーションを削除するハンドラを作成します。iframes

Promise.all(Array.prototype.map.call(document.querySelectorAll("iframe"), function (iframe) {
    return new Promise(function (resolve, reject) {
        iframe.addEventListener("load", function () {
            resolve();
        });
    });
})).then(function () {
    // Do loading removal
});

jQueryフレームワーク内にとどまりたい場合は、jQuery に独自のPromise APIがあります。

これを容易にするために必要な主なことは、 へのハンドルを保持するiframesことです。これにより、それらが指す URL を変更する前に明示的なロード ハンドラをそれらにアタッチできます。そうしないと、場所がキャッシュされている場合などに load イベントを見逃す可能性があります。

次の代替コードを検討してください。

var urlArr, iframeProms;

// Array of urls that we need to make iframes for
urlArr = [
    "http://www.google.com",
    "http://www.yahoo.com"
];

// Map the urls to an array of objects containing iframe elements and associated promises
iframeProms = $.map(urlArr, function (url) {
    var d, iframe;

    // Make a deferred that we will resolve on iframe load
    d = $.Deferred();

    // Make an iframe
    iframe = $("iframe");

    // Add a load listener BEFORE YOU ADD THE URL
    iframe.on("load", function () {
        // Resolve the deferred
        d.resolve();
    });

    // Now provide the url so we don't miss timing for load event
    iframe.src = url;

    // Return a handle to the iframe and the deferred's promise
    return {
        i: iframe,
        p: d.promise
    };
});

// Map down to the promises and what for them to resolve
$.when($.map(iframeProms, function (i) {
    return i.p;
})).then(function () {
    // Do loading removal
});
于 2016-02-22T21:11:52.237 に答える