jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 - セレクター > iframe 内から親ページの要素にアクセスする方法

iframe 内から親ページの要素にアクセスする方法

HTML5 では iframe の機能強化が行なわれています。

例えばサンドボックス (sandbox) も実装され、スクリプトの実行権限やフォームサブミットの制御なども行なえるようになりました。

Android で言うところのフラグメント的に使え、再利用も簡単なので今後はより利用が進むものと思われます。

しかし、プログラミングを行なうにあたっては、少し注意が必要になります。

なぜなら、あるページ A 上の iframe 内にロードされた ページ B では、ドキュメントが異なるためです。

ページ A から B は、iframe 自体が A 上にあるのでアクセスは簡単ですが、特にページ B から A を参照するには少し工夫が必要です。

ここでは次のシナリオをどのように実装するのか説明します。

ページ iframe-test.html 内に iframe があります。その iframe の src には iframe1.html が設定されています。そして、iframe1.html 上にはボタンがあります。

このボタンを押したときに、親ページである iframe-test.html の p タグ内に、文字 "Hello!" を設定しています。

これはどのように実装したらよいでしょうか。

iframe-test.html は次の通りです。

<!DOCTYPE html>
<html>
<head>
<style>
#f1 {
  width: 250px;
  height: 100px;
  border: 1px solid #aaa;
}
</style>
</head>
<body>
<iframe id='f1' name='f1' src='iframe1.html'></iframe>
<p id='p1'></p>
</body>
</html>

iframe1.html は次の通り。jQuery の取り込み箇所は
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
を指定しています。

<!DOCTYPE html>
<html>
<head>
<script src="..."></script>
<script src='iframe1.js'></script>
<style>
body {
  background-color: #ccc;
}
</style>
</head>
<body>
<p><button id='button1'>TEST</button></p>
</body>
</html>

さて、問題の iframe1.html に読み込まれる iframe1.js は次の通りです。

$(document).ready(function(event){
  $('#button1').click(function(event){
    $('#p1', parent.document).text('Hello!');
  });
});

ポイントは iframe1.html から、その親ページの要素にアクセスするときに、親ウィンドウのドキュメントを取得している点です。 現在のウィンドウの親ウィンドウは parent で取得できます。従って親ウィンドウのドキュメントは parent.document で取得できます。

同じドキュメント内の要素はコンテキストを指定せずに $('#p1') などとして取得できますが、今回は parent.document から要素を探すので、 $('#p1', parent.document) としています。

ホーム > jQuery の基礎 - セレクター > iframe 内から親ページの要素にアクセスする方法
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門