【iframeを介してデータを伝える方法】

よそのウェブページの全体または一部分を
自分のウェブページに埋め込みたいとき、
簡単なのが iframe タグを使う方法です。
　
↓自分のページに記述するHTMLタグ

<iframe src="よそのページのURL"></iframe>

こうすると、iframeタグの部分に対象URLの
ページが埋め込まれたような表示になります。
　
でも、
　
「iframeの向こうにあるページの高さに合わせてiframeの高さを設定したい」
　
という要望は（普通は）無理なんです。
　
なぜなら、
　
iframeは自分のページにぽっかりと穴を開けて、
向こう側が見えるようにするイメージです。
　
だから、普通はiframeの向こうのページとは
データ的なつながりを持つことができません。
　
自分のページにスタイルシートを記述しても
iframeの中に見えている部分のレイアウトを
変えることはできません。
　
できるのは、iframeで開けた穴の大きさを
固定値で指定することぐらいです。
　
影響を及ぼすことができるのは自分のページに
記述した iframe タグまでが限界なんです。
　
ですから、iframeタグでTwitterやFacebookの
タイムラインをサイトに設置したとしても、
「プログラム的に連携・連動している」
のとはちょっと意味が違うんですね。
　
双方向でリアルタイムな連携をしているわけ
ではないんです。
　
ところが、HTML5ならiframeを介してお互いの
ページが情報を伝えあうことができます。
　
２つのページは、iframeタグを通じて繋がって
いるので、それをjavascriptを使って操作します。
　
以下、サンプルコードです。

↓送信側（埋め込まれる側）のページ
<script>
//このページをiframeで埋め込んだページの
//ウィンドウオブジェクトを取得する。
var parent = window.parent;
　
//ウィンドウオブジェクトを介して
//相手先ページに自分のページのデータを送信する。
parent.postMessage('任意のデータ', '*');
</script>
　
↓受信側（埋め込む側）のページ
<script>
//データを受信する関数を割り当てておく。
window.addEventListener("message", 受信関数の名前, false);
　
//受信時の処理を定義した関数を作成しておく。
function 受信関数の名前(e) {
　alert("受信したデータは" + e.data + "です。");
}
</script>

詳しい解説は下記リンク先にお任せします。
　
▼この投稿のトピックスはこちら
http://bashalog.c-brains.jp/14/07/10-100000.php