[解決済み] iframeのロード完了イベントをキャプチャする
2022-04-22 14:57:51
質問
iframeのコンテンツが親ページから完全にロードされたことを捕捉する方法はありますか?
どのように解決するのですか?
<iframe>
要素には
load
イベント
そのために
そのイベントをどのように聴くかはあなた次第ですが、一般的にベストな方法は
1) プログラムでiframeを作成する
これは、あなたの
load
リスナーをアタッチすることで、常に呼び出されるようになります。
前に
は、iframe の読み込みを開始します。
<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...';
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>
2) インラインのジャバスクリプト は、HTMLマークアップの中で使用できる別の方法です。
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>
3) イベントリスナーを添付することもできます。
要素の後に
の内部、または
<script>
タグを使用しますが、この場合、リスナーを追加するまでに iframe がすでに読み込まれている可能性が少しあることに注意してください。そのため
ない
が呼び出されます (例: iframe が非常に高速である場合、またはキャッシュから来る場合)。
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>
については、他の回答も参照してください。
このタイプの
load
イベント
関連
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
vueにおけるv-forループオブジェクトのプロパティ
-
Vueでルートネスティングを実装する例
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
[解決済み] addEventListenerとonclickの比較