1. TOP>
2. JavaScript Tips>
3. iframe内の要素を操作する

iframe内の要素を操作する

jQueryでiframe内の要素を操作するには、セレクタの第二引数にiframeのdocumentオブジェクトを指定するだけで良い。iframeのdocumentオブジェクトはcontentsメソッドで取得できる。

			$(document).ready(function() {
				// iframe1のid=cvs1の背景をsilverにする
				$('#iframe1').load(function() {
					$('#cvs1', $(this).contents()).css({background: 'silver'});
				});
			});

上記の例では、iframe内のhtmlドキュメントがロードされた後で処理を実行するために、loadイベントを利用している。ただし、この方法でもブラウザによっては意図した通りに動かない場合もある。

jQueryで操作するhtmlのiframeは以下のように書いた。sample.htmlがロードされた後、sample.html中のid=cvs1のタグの背景がjQueryによってsilverに変更される。

• jQuery()
• .contents()
• .load()