Lightbox Info Board : SQLの窓

ページに IFRAME を埋め込んで、埋め込まれたページから IFRAME を閉じる

基本ページでは、IFRAME には、id属性による識別子(myframe)が設定されますので、
この IFRAME を非表示にするには、この id を使う事になります。

少なくともこの id を IFRAME の中のページに認識させる為に refpage.php?id=myframe という
形式で引き渡しています。引き渡されたページは PHP ですから、$_GET['id'] で参照可能なので、
ページのクライアント側に埋め込んで使用します(参照ページ)。

そして、IFRAME 内から見ると、id は親ウインドウでのみ有効な識別子なので parent.document から参照します。

基本ページ


<?

$iframe = "myframe";

?>
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>基本ページ</TITLE>
</HEAD>
<BODY>

<IFRAME
	src="refpage.php?id=<?= $iframe ?>"
	id="<?= $iframe ?>"
	name="<?= $iframe ?>"
	frameborder="yes"
	scrolling="yes"
	width="200"
	height="100"
></IFRAME>

</BODY>
</HTML>

上記の PHP ページに記述された IFRAME は以下のようになります


<IFRAME
	src="refpage.php?id=myframe"
	id="myframe"
	name="myframe"
	frameborder="yes"
	scrolling="yes"
	width="200"
	height="100"
></IFRAME>

参照ページ


<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>参照ページ</TITLE>
<SCRIPT type="text/javascript" language="javascript">

function closeSelf() {

	var target = null;

	target=parent.document.getElementById("<?= $_GET['id'] ?>");
	target.style.display="none";

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT
	type="button"
	value="閉じる"
	onClick='closeSelf();'
>

</BODY>
</HTML>

そして、参照ページの URL は以下のようになります( プロパティで確認 )


http://localhost/phptest/param_relay/refpage.php?id=myframe

また、closeSelf() は以下のように置き換えられます


function closeSelf() {

	var target = null;

	target=parent.document.getElementById("myframe");
	target.style.display="none";

}

IFRAME の中に FRAME を挟んで深い階層になった場合

IFRAME の中の IFRAME は通常考えられませんが、
IFRAME の中に FRAME を使用する事は十分考えられます。

この場合、参照方法として parent.parent という具合に中から親を参照する場合は
階層が深くなるだけなのですが、親から子へパラメータをリレーする場合には少し注意が必要です

実用のサンプルとして、元の親ページにテキストフィールドを作成し、
FORM でサーバーへデータを送信する事を想定し、name 属性で識別子を設定します。

IFRAME 内にはまず FRAMESET の定義が記述された( いわゆるフレーム ) php のページを置きます。
渡すパラメータは、IFRAME 自身の識別子(id) と、テキストフィールドの識別子(name) です。


<?

$iframe = "myframe";

?>
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>基本ページ</TITLE>
</HEAD>
<BODY>

<INPUT type="text" name="data1">
<INPUT type="text" name="data2">
<br>
<IFRAME
	src="frame.php?id=<?= $iframe ?>&d1=data1&d2=data2"
	id="<?= $iframe ?>"
	name="<?= $iframe ?>"
	frameborder="yes"
	scrolling="yes"
	width="238"
	height="150"
></IFRAME>

</BODY>
</HTML>

以下は、frame.php の内容ですが、さらに別ページにパラメータを渡す為、
特に refbody.php に対して工夫されています。
これは、親からもらったパラメータを全て引き渡す為の簡単な記述方法です。

こうしておけば、仕様が変わっても変更が少なくて済みます。


<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
</HEAD>
<FRAMESET id="TopFrame" rows="65,*">
	<FRAME name="HeadFrame" src="refpage.php?id=myframe">
	<FRAME name="BodyFrame" src="refbody.php?<?= $_SERVER['QUERY_STRING'] ?>">
</FRAMESET>
</HTML>

上記内容が↓のように置き換えられます


<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
</HEAD>
<FRAMESET id="TopFrame" rows="65,*">
	<FRAME name="HeadFrame" src="refpage.php?id=myframe">
	<FRAME name="BodyFrame" src="refbody.php?id=myframe&d1=data1&d2=data2">
</FRAMESET>
</HTML>

ここまで来れば、さらに下の階層では親の親にデータをセットするだけですが、name 属性の識別子なので、
getElmentsByName("識別子")[0] を使用している事に注意して下さい

refbody.php


<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>データ転送ページ</TITLE>
<SCRIPT type="text/javascript" language="javascript">

function setValue1(str) {

	var target = null;

	target=parent.parent.document.getElementsByName("<?= $_GET['d1'] ?>")[0];
	target.value = str;

}

function setValue2(str) {

	var target = null;

	target=parent.parent.document.getElementsByName("<?= $_GET['d2'] ?>")[0];
	target.value = str;

}

</SCRIPT>
</HEAD>
<BODY>

<SPAN
	style='font-size:14px;text-decoration:underline;color:blue;cursor:pointer;'
	onClick='setValue1("0001")'>親ページに値を転送する(CODE)</SPAN><br>
<SPAN
	style='font-size:14px;text-decoration:underline;color:blue;cursor:pointer;'
	onClick='setValue2("山田 太郎")'>親ページに値を転送する(氏名)</SPAN><br>

</BODY>
</HTML>

親から、IFRAME の中を参照するには

親ページから見た IFRAME の id で識別されるオブジェクトは、IFRAME そのものであって、IFRAME の中の
window オブジェクトではありません。

しかし、特に問題があるわけでは無く、contentWindow というプロパティで IFRAME 内のウインドウオブジェクト
を参照するという仕様になっています。


<?

$iframe = "myframe";

?>
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>基本ページ</TITLE>
<SCRIPT type="text/javascript" language="javascript">

function changeLineColor() {

	var target = null;

	// この時点で、frame.php
	target = document.getElementById("<?= $iframe ?>").contentWindow;
	// この時点で、refbody.php
	target = target.BodyFrame

	// Document Object
	target = target.document
	target.getElementsByTagName("SPAN")[0].style.backgroundColor = "#D0D0D0";
	target.getElementsByTagName("SPAN")[1].style.backgroundColor = "#C0C0D0";

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type="text" name="data1" size="5">
<INPUT type="text" name="data2" size="10">
<INPUT 
	type="button"
	value="行の背景色を変更する"
	onClick='changeLineColor()'
	style='width:150px;'
>
<br>
<IFRAME
	src="frame.php?id=<?= $iframe ?>&d1=data1&d2=data2"
	id="<?= $iframe ?>"
	name="<?= $iframe ?>"
	frameborder="yes"
	scrolling="yes"
	width="280"
	height="150"
></IFRAME>

</BODY>
</HTML>

※ BodyFrame は、frame.php 内で定義されている下側のフレームの名前です