[JavaScript] iframe で読み込み完了後に処理を実行するには onload イベントを使おう
- 2016 11/15
- カテゴリー : 未分類
- iframe . JavaScript
- コメントを書く
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);"); }); }; |
以上です。