WEBアプリケーションにおけるパラメータリレー


  ページに 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 内で定義されている下側のフレームの名前です




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[phpVarious]
CCBot/2.0 (https://commoncrawl.org/faq/)
20/08/12 18:42:09
InfoBoard Version 1.00 : Language=Perl

BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube