1. ホーム
  2. javascript

[解決済み] 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 イベント