[JavaScript] iframe で読み込み完了後に処理を実行するには onload イベントを使おう

Tadashi Shigeoka ·  Tue, November 15, 2016

iframe 内のコンテンツの読み込みが完了したら何か処理をさせたい場合 onload イベントを使うことで実現できます。

例えば、以下のコードはインラインフレーム内で frame.html の読み込み完了後に alert(‘complete’); という JavaScript の処理を実行しています。


もう少し具体的なテーマとして iframe 内のリンクをクリック禁止にする処理の実装について考えてみました。

onload を利用して以下のようなコードになります。

HTML

window.replaceIframeHref = function(){
  $("#js-iframe").contents().find("a").each(function(){
    $(this).attr("href", "javascript:void(0);");
  });
};

以上です。