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

Pocket

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

以上です。

  1. コメントはまだありません。

  1. トラックバックはまだありません。