iframe要素の処理 : JavaScript
iframe要素で読み込まれたドキュメントの要素へアクセスするメモ。
index.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>インラインフレームのテスト</title>
</head>
<body>
<iframe width="200" id="frame" height="150" src="sample.html">
テスト
</iframe>
</body>
</html>
iframeに読み込むドキュメント。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>インライン</title>
</head>
<body>
<form id="form" action="#" method="POST">
<input type="submit" value="アラート">
</form>
</body>
</html>
submitボタンをクリックするとアラートを表示する。
index.htmlでjQueryとスクリプトファイルを読み込む。
main.js
jQuery(function($) {
var frame = document.getElementById('frame');
// フレーム要素のonloadイベントを使ってドキュメントの読み込みが完了してから処理を行う。
frame.onload = function() {
// フレーム内の要素にアクセスはcontentWindowプロパティを使う。
var form = frame.contentWindow.document.getElementById('form');
var submit = (function(elem) {
return function() {
window.alert('Frame Test');
return false;
};
}(form));
form.onsubmit = submit;
};
});
下記のスクリプトはフレームにドキュメントが読み込まれる前にフレーム内の要素にアクセスするのでダイアログにerrorが表示される。
jQuery(function($) {
var frame = document.getElementById('frame0');
// frameがドキュメントの読み込みを完了する前に実行されたときformはnull
var form = frame.contentWindow.document.getElementById('form');
if (form === null) {
alert('error');
}
});
» Gist
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。