スポンサーリンク

【JavaScript】iframeのコンテンツの読み込みが終わったらイベントを発火する

JavaScript
スポンサーリンク
本ページにはプロモーションが含まれています。
たろ
たろ

iframeの読み込みが終わったらイベントを発火させるには?

こんな疑問にお答えします。

本記事の内容
  • iframeの読み込みが終わったらイベントを発火する方法の紹介
  • トリガーに onload を使う
スポンサーリンク

iframeをプログラムで作る

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); };
iframe.src = '...'; 
document.body.appendChild(iframe);
</script>

iframeを作成しイベントをあとから定義する仕組み。

事前にiframeDOMに展開されている場合はこのやり方は難しいです。

iframeのonloadにインラインのJavaScript関数を渡す

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

インライン上にScriptを準備しておき、iframeonload に関数を定義するやり方。

JavaScriptでイベントを定義する

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

すでにDOMに表示されている iframe に対してJavaScriptでイベントを定義するやり方。

参考

Capture iframe load complete event

タイトルとURLをコピーしました