インラインフレームから親ウィンドウの操作

javascriptを勉強中です。

インラインフレーム内に設置した画像リンクをロールオーバーした際、インラインフレームを設置している親ウィンドウに指示した画像とテキストを決まった位置に表示できるようにしたいのです。

検索サイトでいろいろなキーワードで調べましたが、「親ウィンドウからインラインフレームへの操作」的なものはあっても、「インラインフレームから親ウィンドウの操作」的なものは見つかりませんでした。

なにとぞご協力お願いいたします！

No.3 ベストアンサー 回答者： yambejp 回答日時： 2005/10/23 14:45

オブジェクトについて理解する必要があるのでは？

あとは自然につながってくると思いますが。
とりあえずイメージは挿入ではなく変更にして
かきなおしました。
image1.jpgとimage2.jpgを入れ替えます。
いかがでしょう？


//iframe.htm
テキストの制御：<span id="text1">データ</span><br>
画像の制御：<image id="image1" src="image1.jpg"><br>
<hr>
<iframe SRC="src.htm" name="iframe1"></iframe>

//src.htm
<a href="javascript:void()" onMouseOVer="tagTxt=parent.document.getElementById('text1');tmpTxt=tagTxt.innerHTML;tagTxt.innerHTML='新しいテキスト'" onMouseOut="tagTxt.innerHTML=tmpTxt">text</a><br>
<a href="javascript:void()" onMouseOVer="tagImg=parent.document.getElementById('image1');tmpImg=tagImg.src;tagImg.src='image2.jpg'" onMouseOut="tagImg.src=tmpImg">image</a><br>
<a href="javascript:void()" onMouseOVer="tagTxt=parent.document.getElementById('text1');tmpTxt=tagTxt.innerHTML;tagTxt.innerHTML='新しいテキスト';tagImg=parent.document.getElementById('image1');tmpImg=tagImg.src;tagImg.src='image2.jpg'" onMouseOut="tagTxt.innerHTML=tmpTxt;tagImg.src=tmpImg">both</a><br>

この回答へのお礼

完璧できました！ありがとうございます。
スクリプトの当てはめ方が少し分かってきました。
どうもお世話になりまして、大変感謝しております！！

お礼日時：2005/10/24 07:30

No.2 回答者： yambejp 回答日時： 2005/10/18 10:22

普通にparentというオブジェクトを制御してください

//iframe.htm
<form name="form1">
フォームの制御：<input type="text" name="element1" value="データ">
</form>
テキストの制御：<span id="text1">データ</span><br>
画像の制御：<span id="image1"></span><br>
<hr>
<iframe SRC="src.htm" name="iframe1"></iframe>

//src.htm
<form>
<input type="button" value="form" onClick="parent.document.form1.element1.value='新しい値'">
<input type="button" value="text" onClick="parent.document.getElementById('text1').innerText='新しいテキスト'">
<input type="button" value="image" onClick="parent.document.getElementById('image1').innerHTML='<img src=image.jpg>'">
</form>

この回答へのお礼

丁寧にあるがとうございます！

フォームで作成するボタンはなく、普通の画像リンクではどうなるでしょうか。

//インラインフレーム内

<a href="javascript:;" onMouseOver="setText('text','コメント１');MM_swapImage('main','','images/02.gif',1)">
<img src="images/hogehoge.gif" width="49" height="77" border="0">
</a>

'main'や'text'を、'parent.document.main''parent.document.text'や、'parent.main''parent.text'にしてみるのはぜんぜん効果なかったです。

お礼日時：2005/10/23 00:57

No.1 回答者： karumakaruma 回答日時： 2005/10/18 10:22

どのようにしたいのかよくわからないので

とりあえずアドバイスという事で・・・・・

JavaScriptでインラインフレームから親にアクションを
起こす場合は、
parent.*****
でいけます。

この回答への補足

基本スクリプトは以下です。

<script language="JavaScript" type="text/JavaScript">
<!--
function setText(tagName,theText)
{
if (document.all) window[tagName].innerText = theText;
if (document.layers)
{
document[tagName].document.open("text/html");
document[tagName].document.write(theText);
document[tagName].document.close();
}
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>

宜しくお願いします！

補足日時：2005/10/23 01:05

この回答へのお礼

ありがとうございます！

parentというのは知っているのですがどこに使うのかよく分かりません。

//親ウィンドウ

<img src="images/hogehoge.gif" name="main" 　id="main"><span id="text" name="text>初期コメント
</span>


//インラインフレーム内

<a href="javascript:;" onMouseOver="setText('text','コメント１');MM_swapImage('main','','images/02.gif',1)">
<img src="images/hogehoge.gif" width="49" height="77" border="0">
</a>


'main'と'text'を、操作の指定箇所にしているのですが、
'main'や'text'を、'parent.document.main''parent.document.text'や、'parent.main''parent.text'にしてみるのはぜんぜん効果なかったです。

お礼日時：2005/10/23 01:05