読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

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

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

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