QNo.673180“同時に2つのリンク先に繋がる方法“

JavaScript初心者です。
QNo.673180の「リンクをクリックすると、同時に2つのリンク先に繋がる方法」について、もう少し詳しく教えていただけませんか?
参考URLを観てみたのですが、そのJavaScriptをどのファイルに記入したらよいのかが良く分りません。

----ファイルの種類----
1)main.html(フレームなし)
2)frame.html(フレーム設定のファイル)
3)left.html(フレーム内の左側)
4)right.html(フレーム内の右側)    とします。

その1)main.htmlよりリンク先をフレーム分割 2)frame.htmlしたいのです。
宜しくお願いします。

投稿日時 - 2003-11-14 15:26:20

QNo.705581

すぐに回答ほしいです

質問者が選んだベストアンサー

再度。

今度はcookieを使ったやり方を。
main.htmlのhead内に以下のソースを追加して、

<script type="text/javascript"><!--
function frameOpen(urlA){
urlData="SetURL="+urlA;
document.cookie=urlData;
location.href="cdfr.htm";
}
//--></script>

関数を呼び出すリンクの表記は前掲と同じように、

<a href="javascript: frameOpen('右フレームに読み出すファイルのURL');">リンク</a>
<a href="#" onClick="frameOpen('右フレームに読み出すファイルのURL'); return false;">リンク</a>

こうしてみてください。 こちらのケースでは、リンクをクリックされたときに、リンクで関数に引き渡した引数を、「SetURL」というキーと一緒にcookieに引き渡して、その後フレームページに移行します。
次に、frame.htmlですが、そのhead内に以下のスクリプトを仕込みます。

<script type="text/javascript">
<!--
function URLchange(){
getc=document.cookie+";";
x1=getc.indexOf("SetURL");
if (x1!=-1) {
tem1=getc.substring(x1-1);
x2=tem1.indexOf("=");
x3=tem1.indexOf(";");
urlData=tem1.substring(x2+1,x3);
frames[1].location.replace(urlData);}
}

window.onload=URLchange;
//-->
</script>

こうすると、frame.htmlのロードが終了したときに、関数URLchangeが呼び出され、そこでcookieを読み込み、そこから先ほどのSetURLというキーの値を取り出して、2つ目のフレームのlocationをそのURLに置き換えます。
フレームを指定している部分は、「frames[1].location.replace(urlData)」この部分になります。 このframes[1]でフレームの配列の2番目(連番は0から始まるので、指定の番号は[1])を指定し、これのlocationを操作します。 もしフレームの表示順を変える場合は、この連番を調整すればよいでしょう。 また、<frame>要素でname属性を指定している場合は、そのname属性の値を利用して「frames["対象のフレーム名"].location.replace()」という指定にしても動作すると思います。

とりあえず、cookieを許容している環境であれば、期待通りの動作になってくれると思います。


------------------------------------------------
なお、前回のアドバイスのdammy.htmlは、上記のような方法をとれば必要なかったかもしれません。 dammy.htmlを作成する代わりに、frame.htmlのhead内に以下のスクリプトを入れることで、同じような動作が期待できます。

<script type="text/javascript">
<!--
function URLchange(){
DW=window.open("","dummy","width=10, height=10");
if (DW.document.f1){
tarURL=DW.document.f1.urls.value;
focus();
DW.close();
window.frames[1].location.replace(tarURL);
}
else {
focus();
DW.close();
}
}

window.onload=URLchange;
//-->
</script>

これも、実際の動作の内容としては、dammy.htmlとして提示したものの動作とほぼ同等です。

たびたび失礼しました。

投稿日時 - 2003-11-20 17:05:51

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

[  前へ  |  次へ ]

ベストアンサー以外の回答(4件中 1~4件目)

ANo.5

訂正:

<script type="text/javascript"><!--
function frameOpen(urlA){
urlData="SetURL="+urlA;
document.cookie=urlData;
location.href="frame.html"; //<<フレームを切るファイルのURL
}
//--></script>

うっかり、テスト用のページのURLをそのままにして送ってしまいました。 失礼しました。

投稿日時 - 2003-11-20 17:12:43

お礼

御礼がずいぶん遅くなり、申し訳ありませんでした。
ほんの少しアレンジをさせていただいて、
思うように操作できるようになりました。
また、よろしくお願いします。

投稿日時 - 2004-03-12 17:27:02

ANo.3

補足見ました。 その場合、少々複雑な仕掛けを施す必要があると思います。 それでも、JavaScriptの実装に関するブラウザの差で、すべての環境で問題なく表示させられるかは判りません。 表示させるコンテンツ毎にHTMLファイルを用意したほうが、簡単に済むかもしれません。

とりあえず、ちょっと設計してみました。
用意するファイルは、トップになるファイル(top.html)と、フレームを切るファイル(frame.html)、右フレームの仕掛け用のダミーファイル(dummy.html)で、あとは左フレームの内容(left_frame_List.html)と表示内容のファイルを適宜用意してください。
top.htmlのhead中には、以下のスクリプトを仕込みます。

<script type="text/javascript"><!--
function frameOpen(urlA){
DW=window.open("","dummy","width=10, height=10, top=10000");
DW.blur();
DW.document.open();
DW.document.write("<html>\n<head>\n<title>ダミー</title>\n");
DW.document.write("</head>\n<body>\n");
DW.document.write("<form name=\"f1\">\n");
DW.document.write("<input type=\"hidden\" name=\"urls\" value=\""+urlA+"\">\n");
DW.document.write("</form>\n");
DW.document.write("</body>\n</html>\n");
DW.document.close();
location.href="frame.html";
}
//--></script>

これは、仕掛けたデータを渡すのに利用する子ウィンドウを開き、その後フレームページを呼び出す動作になります(子ウィンドウは画面から外れたところに表示されると思います=実質的には見えない)。 開いた子ウィンドウには、このページからHTMLソース(フォーム)を書き込み、そこに対象となるフレーム内容のページのURLをメモしておきます。
この関数を呼び出すときには、

<a href="javascript: frameOpen('右フレームに読み出すファイルのURL');">リンク</a>
<a href="#" onClick="frameOpen('右フレームに読み出すファイルのURL'); return false;">リンク</a>

このいずれかで呼び出すと、普通のリンクのように扱えるでしょう。

frame.htmlの中身は、左フレームにleft_frame_List.html、右フレームにdummy.htmlを読み出すようにしておきます。

dummy.htmlは、以下のようなソースにしてみてください。

<html>
<head>
<title></title>
<script type="text/javascript"><!--
DW=window.open("","dummy");
tarURL=DW.document.f1.urls.value;
focus();
DW.close();
location.replace(tarURL);
//--></script>
</head>
<body>
</body>
</html>

これは、先ほど開いた子ウィンドウを取得し、そこから先ほどフォームに書き込んだURLの値を取り出し、このウィンドウを前面に出して、子ウィンドウを閉じ、その後取得したURLにlocationを置き換えます。 これが読み出された順番に処理されるので、実質的にこのファイルを読み出したフレーム内が、自動でtop.htmlで指定した目的のページに移動します。

とりあえず、これでJavaScriptを利用する形でお望みの動作を得られるのではないかと思います。
一応、手元の環境(WinMe)ではIE6、Netscape7.1、Opera7.11で動作確認を取りました。

もっとスマートなやり方もあるかもしれませんが、とりあえず参考になれば。

投稿日時 - 2003-11-20 00:57:37

ANo.2

あの、ご質問の一番最後にある一文の内容は、すべてHTMLのみでできるように思います。

main.htmlのリンクから二つのフレームに分かれたページに飛ばしたいということで、frame.htmlというフレームを切るHTMLファイルを用意しているということでしたら、frame.htmlの中身を件の質問の参考URLの内容を参考にして記述すればよいだけと思います。
この場合でしたら、frame.htmlとされているファイルのソースを、

<html>
<head>
<title>フレーム</title><!--←適当なタイトルをつけてください-->
</head>
<frameset cols="400,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</html>

こういう感じにすれば、フレームを切るファイルのほうでそれぞれのフレームに指定のファイルを読み込むようにできますよね。 あとは、main.htmlからframe.htmlへのリンクを張ってやれば、自動的にフレーム分けされた二つのページが表示されるはずです。

もし、このフレームをすでに表示した状態で、一つのリンクからこのフレーム上の二つのファイルを一挙に変更したいというケースでしたら、そのリンクがあるファイルの中にJavaScriptによるページ遷移の指定を記述します。 例の参考URLの一番下に書かれている内容です。
例えば、left.htmlの内容として、左フレームのページをleft2.html、右フレームのページをright2.htmlに、一度に変更させるリンクを用意するとしたら、left.htmlの中にその動作を記述したJavaScriptを用意する必要があります。

ご質問の内容はこういうことでよろしいでしょうか?
見当違いでしたら、ごめんなさい。

投稿日時 - 2003-11-14 20:15:31

補足

説明が上手きできていなくてすみません。
ANo.#1さんの補足の部分へ書き足しておきました。
どうかそちらをご覧になってください。
lead1976さんが後半におっしゃっている
“フレームを既に表示した状態から、...二つのファイルを一挙に変更したいケース”とはちょっと違いました。
説明不足ですみませんでした。

投稿日時 - 2003-11-17 10:52:08

ANo.1

文面からははっきりしたことはわからないのですが、
フレームなしページのリンクをクリックして、
左右2つに分けたフレームページへ移動するだけなら、
JavaScriptを使用しなくても、frame.html内の記述で
左フレームをleft.html、右フレームをright.htmlに指定して、
main.htmlのリンク先をframe.htmlに設定すればよいのではないでしょうか?
何か意図があってJavaScriptを使う必要があるのなら、補足お願いします。

投稿日時 - 2003-11-14 17:07:18

補足

説明不足ですみません。
簡単に説明すると以下のとおりです。
+++++++++++++++++++++++++++++++++++++
<<main.html>>フレームなしページ
.......
<body>
<a href="frameA">AAA<a>
<a href="frameB">BBB<a>
<a href="frameC">CCC<a>
...
<a href="frameZ">ZZZ<a>
</body>
.......
+++++++++++++++++++++++++++++++++++++++++++++++
それぞれのフレーム左側は<<left_frame_List.html>>
(リストが陳列されたファイル)で統一しています。
ただ、フレーム右側のみ表示されるファイルを下記の
ようにしたいのです。
A)<<frameA.html>>
<<left_frame_List.html>>
<<right_frameA.html>>
B)<<frameB.html>>
<<left_frame_List.html>>
<<right_frameB.html>>
C)<<frameC.html>>
<<left_frame_List.html>>
<<right_frameC.html>>
...
Z)<<frameZ.html>>
<<left_frame_List.html>>
<<right_frameZ.html>>
+++++++++++++++++++++++++++++++++++++++++++++++++
<<frameA.html>>
<<frameB.html>>....<<frameZ.html>>
と多くのフレーム設定ファイルを持たなくても、
JavaScriptを利用して
<<frame.html>>のファイル一つで簡単に設定できないかと思います。
宜しくお願いします。

投稿日時 - 2003-11-17 10:48:21

あなたにおすすめの質問

[PR] お役立ち情報