たろ
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を作成しイベントをあとから定義する仕組み。
事前にiframeがDOMに展開されている場合はこのやり方は難しいです。
iframeのonloadにインラインのJavaScript関数を渡す
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>インライン上にScriptを準備しておき、iframe の onload に関数を定義するやり方。
JavaScriptでイベントを定義する
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>すでにDOMに表示されている iframe に対してJavaScriptでイベントを定義するやり方。
