JavaScript iframeの読み込み完了を探知するには

Question

前提・実現したいこと

iframeのページの読み込み完了を探知したいのですが、
下記ではできませんでした
まず可能なのかもわかりませんが、
詳しい方お願いいたします

該当のソースコード

<script>
window.onload=function(){
document.getElementById('iframe').contentWindow.addEventListener('load',function(){
alert("読込完了");
},false);
}
</script>
<iframe src="https://teratail.com/" id="iframe"></iframe>

Answer 1

document.addEventListener('DOMContentLoaded', event => {
  // HTMLのDOMツリーが読み込み完了した時に実行される
  document.getElementById('iframe').onload = () => {
    // iframe要素が読み込まれた時に実行される
    alert("読込完了");
  };
});

window.onload=function(){
  // なぜこちらではうまくいかなかったというと、
  // windowのonloadイベントは、”全てのリソース”が読み込まれた後に実行されるため
  // つまり、ここの処理が走った時点で、iframeの読み込みも終わってしまっているため、
  // iframeのonloadイベントは実行されない
};