[解決済み] 動的に挿入される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イベントを使用するのが良いと思いました。
関連
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
要素ツリー制御によるvueTreeテーブル
-
jsを使った簡単な照明スイッチのコード
-
Vueのクラススタイルの使い方の詳細
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
JavaScriptのgetElementById()メソッド入門