少し前に「jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法」と題して、
iframeの親ページから子ページを操作する方法を紹介しましたが、
その逆の、iframeの子ページから親ページを操作をする方法について
簡単なサンプルを交えて紹介してみます。
jQueryでiframe内のページから親ページを操作する方法
親ページ側では特にjQueryファイル自体を読み込む必要は無く、
iframe内に表示するページ側で、jQueryファイルと共に
下記の様なスクリプトを書くことで操作することが可能になります。
◆SCRIPT
$(function(){
$('p',parent.document).css({color:'#ff0000'});
});
この記述方法（参考例）の場合だと、iframe内のページからの操作で
親ページの＜p＞タグのテキスト色を「赤」に変更します。
スクリプトを実行させる該当要素の後に「,parent.document」と記述することで
親ページへの指定になります。
この記述方法を元に、いくつか使用方法のサンプルを紹介してみます。
まずはiframe子ページから親ページの要素を消す方法。
jQueryでiframe内のページから親ページの要素を削除
親ページには「id=”contents”」と名づけたエリアを設け、
iframe内のページ（子ページ）内で、ボタン要素「id=”delete”」を用意して
ボタンをクリックした時点でスクリプトを実行させます。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script type="text/javascript">
$(function(){
$('#delete').click(function(){
$('#contents',parent.document).stop().animate({opacity:'0'});
});
});
</script>
「id=”delete”」がクリックされたら
親ページの「id=”contents”」の透明度を0にする動作が実行されます。、
実際の動作はこちらから。（※ページ内の「親ページの要素を消す」のボタンをクリックしてみてください。）
≫iframe内のページから親ページの要素を削除
続いて、iframe内のページ要素の高さを取得して
親ページの＜iframe＞タグ内に自動で入れ込む方法。
jQueryでiframe内のページ要素の高さを親ページの＜iframe＞に設定
親ページには特に指定は無く、
iframe内のページ（子ページ）内で、以下のスクリプトを実行させます。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script type="text/javascript">
$(function(){
var frameWidth = $('#parent_iframe',parent.document).width();
$('#container').css({width:(frameWidth)});
var contentsHeight = $('#container').height();
$('#parent_iframe',parent.document).css({height:(contentsHeight)});
});
</script>
最初の2行で親ページからiframeの幅を取得し、
続いての2行ではiframe内のコンテンツ要素から高さを取得し、
親ページのiframeに対して高さの指定を加えています。
※今回のサンプルでは親ページのiframeには「id=”parent_iframe”」としています。
※幅を取得している最初に2行は特に重要ではなく念の為の指定になっています。
実際の動作はこちらから。（※ページがロードされた時点でiframeの高さが設定されます。）
≫iframe内のページ要素の高さを親ページの＜iframe＞に設定
IEではスクロールバーが出てしまうので
処理が別途必要になりますが今回は省きます。。。
動作サンプルについては以上です。
Google Chromeではローカルでは「,parent.document」が実行されないようなので
Google Chromeで確認する際はデータをサーバにアップしないと動作しません。
この様な方法で単純なiframeページのみでなく、
モーダルウィンドウでiframeを使用した場合などでも
様々な用途で親ページの操作が可能になると思います。
ご参考までに。。。