web-dev-qa-db-ja.com

iframeロード完了イベントをキャプチャします

Iframeのコンテンツが親ページから完全にロードされたときにキャプチャする方法はありますか？

javascripthtmliframeloaddhtml
106
Jaime Garcia

<iframe>要素にはload eventがあります。

そのイベントを聞く方法はあなた次第ですが、一般的に最善の方法は次のとおりです。

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）インラインjavascriptは、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イベントも発生させることができる要素 に関する他の回答も参照してください

158
gblazex

上記の答えはどちらもうまくいきませんでしたが、これはうまくいきました

UPDATE：

以下で@dopplegangerが指摘したように、jQuery 3.0の時点で負荷がなくなっているため、onを使用する更新バージョンがあります。これは実際にjQuery 1.7以降で機能するため、jQuery 3.0をまだ使用していない場合でも、この方法で実装できます。

$('iframe').on('load', function() {
    // do stuff 
});
21
roryok

別の一貫した方法があります（ IE9 +のみ ）このためのVanilla JavaScriptには：

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

そして Observables に興味があるなら、これはトリックです：

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);
5
aitorllj93

この方法でjquery readyイベントをキャプチャすることもできます。

$('#iframeid').ready(function () {
//Everything you need.
});

これが実際の例です：

http://jsfiddle.net/ZrFzF/

4
Gonza Oviedo

画面外でiframeが読み込まれた場合、onloadイベントは発生しないようです。これは、「新しいウィンドウで開く」/ wタブを使用するときに頻繁に発生します。

2
Kenneth M. Kolano