iframe読み込み完了イベントをキャプチャする

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

<iframe>要素にはそのためのloadイベントがあります。

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

1）プログラムでiframeを作成する

これにより、iframeの読み込みが開始される前に、loadリスナーをアタッチして常に呼び出されます。

<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マークアップ内で使用できるもう1つの方法です。

<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

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

更新：

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

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

これのためのバニラJavaScriptには、別の一貫した方法（IE9 +のみ）があります。

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)
);

オフスクリーンのときにiframeが読み込まれると、onloadイベントは発生しないようです。これは、「新しいウィンドウで開く」/ wタブを使用するときに頻繁に発生します。

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

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

これが実際の例です：

http://jsfiddle.net/ZrFzF/