人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: shinwa-tokyo
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript URL とある アドバイス
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● nandedarou
●20ポイント

●下記htmlを5つを用意して、実験しました。次の(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 ダミー

◎質問者からの返答

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

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

基本ページ 基本ページ内の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以外の部分からのリンクでページ移動したときも上記のことを実現したいと考えています。このようなことは可能なのでしょうか。よろしくお願いします。


2 ● nandedarou
●20ポイント

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

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

menu_jp.htmlのdummyタグ

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

menu_en.htmlのdummyタグ

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

●ポイント2

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属性には、メニューのファイル名が書いてある。(上記ポイント1)


よって、どこから呼び出されても、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

◎質問者からの返答

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


3 ● susie-t
●40ポイント

横からすみません。

おそらく、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に関数をまとめました。

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

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ