id:shinwa-tokyo
ポイントあり80pt回答受付終了
インターネットウェブ制作

JavaScriptを使って以下のことはできますでしょうか。できる場合どのようにすればよいかアドバイスいただけますでしょうか。


とあるページに英語と日本語のメニューを設けるためにそれぞれのメニューをインラインフレームで表示しています。英語と日本語のメニューの切り替えはインラインフレーム内のページにあるリンクで切り替えています。メインページ（メニュー以外の情報を表示するページ、メニューの親フレーム）は英語と日本語を同じページ内に併記する形にしています。

リンク元ページ内のメニューのインラインフレームのURLがmenu_jp.htmlであるときは、移動後のページ内の同じインラインフレームのURLをmenu_jp.htmlに、
リンク元内のメニューのインラインフレームのURLがmenu_en.htmlであるときは、移動後のページ内の同じインラインフレームのURLをmenu_en.htmlにすることはできますか。

ただしリンクはmenu_jp.htmlやmenu_en.html以外のメインページにも存在しそこからのリンクでページ移動したときも上記のことを実現したいです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録：
  • 終了：2007/04/06 02:22:29
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（3件）

id:nandedarou No.1

回答回数230ベストアンサー獲得回数34

ポイント20pt

●下記htmlを５つを用意して、実験しました。次の（A）または（B）のように画面遷移します。

（A）main_jp.htmlのインラインフレームmenu_jp.html→main2.htmlのインラインフレームmenu_jp.html


（B）main_en.htmlのインラインフレームmenu_en.html→main2.htmlのインラインフレームmenu_en.html


ポイントは、main2.htmlのonLoadイベントで、次のコードを実行する部分です。

document.getElementById('ID').src=opener.document.location;

※ID'は、インラインフレームのid属性にセットした値です。

document.getElementById('ID').srcは、main2.html自身のインラインフレームのsrc属性です。

opener.document.locationは、呼び出しもとのhtmlのURLという意味です。

このジャバスクリプトにより、移動後のページ（main2.html）内のインラインフレームのURLに、リンク元内のメニューのインラインフレームのURLがセットされます。


●main_jp.html

<html>
<head>
</head>
<body>
<iframe src="menu_jp.html" ></iframe>
</body>
</html>

●main_en.html

<html>
<head>
</head>
<body>
<iframe src="menu_en.html" ></iframe>
</body>
</html>

●menu_jp.html

<html>
<head>
</head>
<body>
日本語メニュー
<INPUT type="button" value="main2" onClick="window.open('main2.html');">
</body>
</html>

●menu_en.html

<html>
<head>
</head>
<body>
EnglishMenu
<INPUT type="button" value="main2" onClick="window.open('main2.html');">
</body>
</html>

●main2.html　←これがポイント

<html>
<head>
<script>
<!--
function set_iframe_url(){
    document.getElementById('ID').src=opener.document.location;
}
//-->
</script>
</head>
<body onLoad="set_iframe_url()">
<iframe id="ID" ></iframe>
</body>
</html>

http://q.hatena.ne.jp/answer　ダミー

id:shinwa-tokyo

ご丁寧なご回答ありがとうございます。

私の説明がややわかりにくかったかもしれませんのでもう一度説明させていただけます。再度ご教授いただけたら幸いです。

基本ページ　　基本ページ内のiframe

main1.html　　　menu_jp.html

　　　　　　　　　　menu_en.html

main2.html　　　menu_jp.html

　　　　　　　　　　menu_en.html

となっていてmenu_jp.htmlとmenu_en.htmlはそれぞれ切り替えが可能なようになっています。

main1.html→main2.htmlにページ移動するときにmain1.htmlに表示されているiframeがmenu_jp.htmlかmenu_en.htmlか判別し、main2.htmlのiframeにもmain1.htmlのiframeと同じ物を呼び出したいのです。このときリンクがmenu_jp.htmlやmenu_en.htmlにあるのであれば上記の方法（呼び出し元を参照する方法）でできると思うのですが、リンクはmain1.htmlのiframe以外の部分にもあるのです。このようにiframe以外の部分からのリンクでページ移動したときも上記のことを実現したいと考えています。このようなことは可能なのでしょうか。よろしくお願いします。

2007/04/02 14:09:54
id:nandedarou No.2

回答回数230ベストアンサー獲得回数34

ポイント20pt

下記htmlを4つを用意して、実験しました。たぶんお望みのように動くと思います。

●ポイント１　←今回最大のポイント

menu_jp.htmlのdummyタグ

<dummy id="ID" src="menu_jp.html">

menu_en.htmlのdummyタグ

<dummy id="ID" src="menu_jp.html">

●ポイント２

main1.htmlとmain2.htmlのonLoadイベントで次のコードが呼び出される。

function set_iframe_url(){
    document.getElementById('ID').src='menu_jp.html';
    document.getElementById('ID').src=opener.document.getElementById('ID').src;
}

document.getElementById('ID').src　は、当該html内のiframeのsrc属性。

opener.document.getElementById('ID').src　は、呼び出しもとのIDというidのエレメントのsrc属性。


main1.htmlとmain2.htmlでは、IDというidのエレメントとは、iframeのこと。

menu_jp.htmlとmenu_en.htmlでは、IDというidのエレメントとは、dummyのこと。

※dummyのsrc属性には、メニューのファイル名が書いてある。（上記ポイント１）


よって、どこから呼び出されても、opener.document.getElementById('ID').srcは、前画面で表示されたメニューのhtmlとなる。


※document.getElementById('ID').src='menu_jp.html';

これは、一番最初の画面で、menu_jp.htmlを表示するようにする為のコード。


●main1.html

<html>
<head>
<style>
<!-- .ilink { cursor:hand; text-decoration:underline; color:blue } -->
</style>
</head>
<script>
<!--
function set_iframe_url(){
    document.getElementById('ID').src='menu_jp.html';
    document.getElementById('ID').src=opener.document.getElementById('ID').src;
}
//-->
</script>
<body onLoad="set_iframe_url()">
メイン1(main1)<br>
<span class="ilink" onClick="window.open('main2.html')">メイン2(main2)</span><BR>
<br>
<span class="ilink" onClick="document.getElementById('ID').src='menu_jp.html'">日本語メニュー</span>｜
<span class="ilink" onClick="document.getElementById('ID').src='menu_en.html'">EnglishMenu</span><BR>
<iframe id="ID"></iframe>
</body>
</html>

●main2.html

<html>
<head>
<style>
<!-- .ilink { cursor:hand; text-decoration:underline; color:blue } -->
</style>
<script>
<!--
function set_iframe_url(){
    document.getElementById('ID').src='menu_jp.html';
    ID.location.href=opener.document.getElementById('ID').src;
}
//-->
</script>
</head>
<body onLoad="set_iframe_url()">
<span class="ilink" onClick="window.open('main1.html')">メイン1(main1)</span><BR>
メイン2(main2)<br>
<br>
<span class="ilink" onClick="document.getElementById('ID').src='menu_jp.html'">日本語メニュー</span>｜
<span class="ilink" onClick="document.getElementById('ID').src='menu_en.html'">EnglishMenu</span><br>
<iframe id="ID"></iframe>
</body>
</html>

●menu_jp.html

<html>
<head>
<style>
<!-- .ilink { cursor:hand; text-decoration:underline; color:blue } -->
</style>
</head>
<body>
日本語メニュー<br>
<span class="ilink" onClick="window.open('main1.html')">メイン1</span><br>
<span class="ilink" onClick="window.open('main2.html')">メイン2</span>
<dummy id="ID" src="menu_jp.html">
</body>
</html>

●menu_en.html

<html>
<head>
<style>
<!-- .ilink { cursor:hand; text-decoration:underline; color:blue } -->
</style>
</head>
<body>
EnglishMenu<br>
<span class="ilink" onClick="window.open('main1.html')">main1</span><br>
<span class="ilink" onClick="window.open('main2.html')">main2</span>
<dummy id="ID" src="menu_en.html">
</body>
</html>

http://q.hatena.ne.jp/answer

id:shinwa-tokyo

ご丁寧な回答ありがとうございます。私が考えていた動きはほぼこれで間違いないのですが、＃３の回答者様がご指摘のようにサブウィンドウを開くのではなくリンクでの移動を考えておりました。どちらにせよ丁寧にお教えいただいたことに感謝申し上げます。色々と勉強になりました。

2007/04/06 01:19:23
id:susie-t No.3

回答回数99ベストアンサー獲得回数18

ポイント40pt

横からすみません。

おそらく、2の回答では要件を満たしていないと思われます。(サブウィンドウを開くのではなく、リンクでの移動が要件だと思います。)

要件を満たすためには、サーチデータ(URLの後ろに?~とつける文字列)を利用して、ページ間でデータを受け渡すとよいと思います。

その場合の例です。

[test.js]
function changePage(elem, src){
  elem.href += ('?src=' + src);
}
function changeIFrame(event, elem, iframe){
  document.getElementById(iframe).src = elem.href;
  stopEvent(event);
}
function stopEvent(event){
  if(event.preventDefault){
    event.preventDefault();
    event.stopPropagation();
  }else{
    event.returnValue = false;
    event.cancelBubble = true;
  }
}
function setIFrame(iframe){
  var q = location.search.match(/src=(.*)/);
  if(q){
    document.getElementById(iframe).src = q[1];
  }
}

[main1.html]
<html>
<head>
</head>
<script type="text/javascript" src="test.js"></script>
<body onload="setIFrame('IFRAME');">
メイン1(main1)<br/>
<a href="main2.html" onClick="changePage(this, document.getElementById('IFRAME').src);">メイン2(main2)</a><br/>
<br>
<a href="menu_jp.html" onclick="changeIFrame(event, this, 'IFRAME');">日本語メニュー</a>｜
<a href="menu_en.html" onclick="changeIFrame(event, this, 'IFRAME');">EnglishMenu</a><br/>
<iframe id="IFRAME" src="menu_jp.html"></iframe>
</body>
</html>

[main2.html]
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<body onload="setIFrame('IFRAME');">
<a href="main1.html" onclick="changePage(this, document.getElementById('IFRAME').src);">メイン1(main1)</a><br/>
メイン2(main2)<br/>
<br/>
<a href="menu_jp.html" onclick="changeIFrame(event, this, 'IFRAME');">日本語メニュー</a>｜
<a href="menu_en.html" onclick="changeIFrame(event, this, 'IFRAME');">EnglishMenu</a><br/>
<iframe id="IFRAME" src="menu_jp.html"></iframe>
</body>
</html>

[menu_jp.html]
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
日本語メニュー<br>
<a target="_top" href="main1.html" onclick="changePage(this, location.href);">メイン1</a><br/>
<a target="_top" href="main2.html" onclick="changePage(this, location.href);">メイン2</a>
</body>
</html>

[menu_en.html]
<html>
<head>
<script type="text/javascript" src="test.js"></script></head>
<body>
EnglishMenu<br>
<a target="_top" href="main1.html" onclick="changePage(this, location.href);">メイン1</a><br/>
<a target="_top" href="main2.html" onclick="changePage(this, location.href);">メイン2</a>
</body>
</html>

test.jsに関数をまとめました。

  • changePage関数
    • aタグのonclickに設定。タグのhrefやtarget属性に従って遷移するとき、IFRAMEのsrcアドレスをサーチデータとしてつけます。第一引数がthis(固定), 第二引数がIFRAMEのSRC。main側ではIFRAMEのSRC、menu側ではlocation.hrefを指定してます。
  • changeIFrame関数
    • aタグのonclickに設定。aタグでIFRAMEのsrcを変更する関数。第一引数をevent、第二引数をthis、第三引数をIFRAMEのIDを指定します。aタグのhref属性をIFRAME内に表示します。(ちょっとイレギュラーな使い方です＾＾；)
  • setIFrame関数
    • bodyのonloadに設定。サーチデータを読み取り、IFRAMEのsrcを設定する関数。第一引数にIFRAMEのIDを指定します。サーチデータがない場合、何も設定しません。(デフォルトのまま)

stopEvent関数は外部使用しません。aタグのデフォルト動作(ページ遷移)を抑制するために使用しています。

差し出がましいとは思ったのですが、お役に立てればと思い、横槍を入れさせていただきました。ご容赦ください。

不具合等がありましたらご連絡ください。

ダミー：http://q.hatena.ne.jp/

id:shinwa-tokyo

ご回答ありがとう御座います。お教え頂いたもので私が希望していた動きが完全に作れたのを確認できました。私はまだまだ勉強不足ですが、Javascriptだけでも本当に色々なことができるのだなぁと改めて実感いたしました。

2007/04/06 02:21:30

コメント（1件)

  • id:nandedarou
    nandedarou 2007/04/06 19:19:54
    ●main2.htmlで記述ミスがありました。
    ＞ID.location.href=opener.document.getElementById('ID').src;
    正しくは、
    document.getElementById('ID').src=opener.document.getElementById('ID').src;
    です。

    ＞サブウィンドウを開くのではなくリンクでの移動
    そうですね。普通そうですものね。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ