JavaScript フレーム内のインラインフレームへのリンク

質問

こんにちは

JavaScriptを使って、セレクトメニューのリストから選択すると、同ページ内にあるインラインフレームにページが展開するようにしたいのですが行き詰ってしまったので質問させてください。

・問題点
下記のようにJavaScriptの記述をしているのですが
ブラウザで開いて見ると、「更新情報6月」などを選択しても、もともと開いているページが表示されたままで別のページが開きません。

・ファイル構成
index.html(フレームセット）
　－menu.html（フレーム名　menu）
　－main.html（フレーム名　main）

　new.html(indexを開いた時に表示されているページ）
　new6.html（更新情報6月をクリックすると開いてほしいページ）
　new5.html（更新情報5月をクリックすると開いてほしいページ）

main.htmlの中にインラインフレーム(name＝myNew)
とセレクトメニューがあります。

こちらの過去ログを見たりして記述することが出来たのですが、main.htmlを単体で開いた場合は動作してindex.htmlで開いた場合は動作しないようなのです

「parent.myNew.」がいけないのかなと思うのですが
JavaScriptの細かいことが分からないので
どうしたら良いのか・・・
parentを消したり、thisにしたりしてみたんですが
うまくいきませんでした。

どなたかアドバイスをお願いいたします

----- 記述内 ------------
<select onChange="parent.myNew.location.href=this.options[this.selectedIndex].value">
<option value="" selected></option>
<option value=new6.html>更新情報6月</option>
<option value=new5.html>更新情報5月</option>
</select>

<iframe src="new.html" name="myNew" width="250" height="400"></iframe>

回答No.3

koutarou504 · ベストアンサー

window.self.myNew.location.href=this.options[this.selectedIndex].value

これで充分だと思います。

object window ：ウインドウオブジェクト(ウインドウやフレームの総称)を示す。
object window.parent ：ウインドウ内のフレームの親フレーム。親がいない場合は自分自身を示す。
object window.self ：現在のウインドウ自身。(既定値と思われる)
object window.top ：一番手前(トップ)にあるウインドウ。
object window.self.location ：アドレス（URL）に関する情報を持つ。
string window.self.location.href ：URL。
object window.self.document ：表示している文書自体を示す。
object window.self.document.all() このドキュメント中のすべてのエレメントを参照する。
［注意：document.all() は、IE4 以降やOperaは対応。Mozillaなどは対応していない。］
object window.self.document.getElementById() ：id 属性で指定した名前で要素を参照する。
［注意：やはり一部のブラウザのみ対応。］
array window.self.document.layers ：layerに関する情報を提供したり、操作を行うオブジェクト。
［注意：ネスケおりじなる・・・。］
よってこれらは、
if(window.self.document.getElementById){
}else if(window.self.document.all){
}else if(window.self.document.layers){
};
と存在チェックをして振り分けをしてそれぞれを用いるべきです。
出来たらこれを関数として用意しておくと便利です。

理想はそれぞれ存在チェックをして処理を振り分けですが、そこまでする必要があるのかはよく判りません。
まぁ知識の上ではそれが理想で
現実では最初に提示した方法だけでも充分かと・・・。

お礼

とても詳しい解説ありがとうございます！

まさに必要十分です。
ターゲットブラウザがIE、ネスケ、FireFoxなので
いろいろ試しても全部で動作するものが
なかったのですが、教えていただいた記述で
全部動きました
全部最新バージョンしか確認していませんが・・・

正直細かく説明していただいた部分はチンプンカンプンだったのですが、一言コメントがとてもわかりやすかったです
ありがとうございました！

回答No.2

m035

>「<select onChange="parent.myNew.location～」の「parent.myNew.location」
>という部分を、以下のいずれかにしてみてはどうでしょう。
>●document.all.myNew.location
>●myNew.location
>●document.getElementById('myNew').location
アドバイス（と、言うか意見）：
document.all.myNew.locationは特定のIE専用なので避けたほうが無難です。

myNew.locationは一番どの環境でも動くと思われがちですが、
document.myNew.locationとしたほうがよいです。

document.getElementById('myNew').locationは最近のブラウザしか使えませんので避けたほうがいいです。

結論：onChange="document.myNew.location.href=this.options[this.selectedIndex].value"

説明（？）：
documentはそのHTMLファイルのbodyを表す、と理解するのかよいかと。
つまり、ウィンドウを親とするのではなく、
そのHTMLファイルを親とした親子関係をつかって
オブジェクトにアクセスするのが最適ということです。
（ただしこれは同一HTMLファイル内でのアクセスに限る）
よく分からない説明でしたが参考URLを見てもらえば分かるかもしれません。

参考URL：

http://www.rfs.jp/sitebuilder/javascript/01/03.html

お礼

アドバイスありがとうございます

各記述の意味やブラウザのことまで教えていただいて
とても助かりました。
参考URLもよく読んでみたいと思います！
もっと一つ一つの記述の意味を理解したら
いろんなことが出来て楽しそうです

回答No.1

taseki

「<select onChange="parent.myNew.location～」の「parent.myNew.location」という部分を、以下のいずれかにしてみてはどうでしょう。
●document.all.myNew.location
●myNew.location
●document.getElementById('myNew').location

parentというのは親つまり一つ上のフレームまたはウィンドウを指します。myNewが存在するのは親でなく自分自身なのに、親であるindex.htmlの中のmyNew、という指定になってしまいます。
main.htmlを単体で開いた場合は、親がいない→parentは自分を指す、ので動作したのだと思います。

お礼

早速の回答ありがとうございました。

やはりフレーム内にあるからいけなかったのですね
丁寧な解説でとてもわかりやすかったです。
ありがとうございました！