1. ホーム
  2. javascript

[解決済み] 動的に挿入されるiframe内のjQuery .ready。

2022-04-15 01:31:16

質問

jQueryを使用しています。 太枠 を使用して、誰かが画像をクリックしたときに動的に iframe を表示します。 このiframeの中で ガレリア javascriptのライブラリで、複数の画像を表示することができます。

という問題があるようです。 $(document).ready はあまりにも早く起動され、iframe のコンテンツがまだロードされていないため、galleria のコードが DOM 要素に正しく適用されません。 $(document).ready は、iframe の親の準備完了状態を使用して、iframe が準備完了かどうかを判断しているようです。

document readyで呼ばれる関数を別の関数で取り出し、100msのタイムアウト後に呼び出すと。これはうまくいくのですが、遅いコンピューターがある本番環境では、そのチャンスを生かすことができません。

$(document).ready(function() { setTimeout(ApplyGalleria, 100); });

質問:動的な iframe が準備できたときにコードを実行できるようにするには、どの jQuery イベントにバインドすればよいのでしょうか。

どのように解決するのですか?

似たような質問に答えました( IFRAMEの読み込みが終了したら、Javascriptのコールバックは? ). 以下のコードで、iframeのloadイベントの制御を得ることができます。

function callIframe(url, callback) {
    $(document.body).append('<IFRAME id="myId" ...>');
    $('iframe#myId').attr('src', url);

    $('iframe#myId').load(function() {
        callback(this);
    });
}

iframeの処理では、document readyイベントの代わりにloadイベントを使用するのが良いと思いました。