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

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

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

<iframe src="frame.html" onload="alert('complete');">

(例) iframe 内のリンクをクリック禁止にする

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

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

HTML

<iframe id="js-iframe" src="frame.html" onload="replaceIframeHref();">

JavaScript

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

以上です。