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

質問

javascriptを勉強中です。

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

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

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

回答No.3

yambejp · ベストアンサー

オブジェクトについて理解する必要があるのでは？
あとは自然につながってくると思いますが。
とりあえずイメージは挿入ではなく変更にして
かきなおしました。
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>

お礼

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

回答No.2

yambejp

普通に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'にしてみるのはぜんぜん効果なかったです。

回答No.1

karumakaruma

どのようにしたいのかよくわからないので
とりあえずアドバイスという事で・・・・・

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

お礼

ありがとうございます！

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'にしてみるのはぜんぜん効果なかったです。

補足

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

<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>

宜しくお願いします！