• このエントリーをはてなブックマークに追加

Webページ上でiframeを使った際、インラインフレーム内に読み込むページは、
基本的にはその(子)ページ内でCSSなどそれぞれ設定することになりますが、
jQueryを使ってiframeの親ページから子ページの操作をする方法があったので
メモ書き程度に紹介してみます。

jQueryでiframeの親ページから子ページを操作する方法

◆SCRIPT
$(function(){
	$(window).load(function(){
		$('iframe').contents().find('○○') ~ 処理 ~ ;
	});
});

「.contents」を使って対象をiframeの子ページにして、
「.find」で特定要素を指定、その後に処理する内容を記述します。

例えば、iframeの子ページ内の<p>タグに対して、
テキスト色を「赤」にする場合は以下のように記述します。

◆SCRIPT
$(function(){
	$(window).load(function(){
		$('iframe').contents().find('p').css({color:'#ff0000'});
	});
});

といった記述になります。

「.css」を使うと子ページに対してのCSS操作になりますが、
他の属性やイベントで指定することで色々な操作が可能になります。

操作できるiframeの子ページの対象は、
もちろん「href」で相対パスで指定しているページのみで、
絶対パスで指定しているURLなどの操作は出来ません。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加

Related Posts

Trackback URL

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

SHARE

jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法

  • このエントリーをはてなブックマークに追加
Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR