フレームページの操作

質問

フレームページの操作について質問をさせて下さい。

index.htmlというページから、
左右に2分割されたフレームページ
frame.html というページへリンクを貼るときに、
frame.html であらかじめ表示されるように定義された
2つの left.html、right.html というページ以外に、
あらかじめ index.html から frame.html に向けて、
left2.html、right2.html が表示されるような
リンク設定は可能でしょうか。

やはり left2.html と right2.html 用に新しく
frame2.html というフレームページを、
定義しないとダメでしょうか。

回答No.2

noname#199778 · ベストアンサー

cookieを利用しても良いのであれば、index.htmlからcookieに次のフレームページで開きたいファイルのURLを送っておき、frame.htmlの側でそのcookieからそのURLを取り出してフレーム内に表示するページを流動的に変更させることが可能だと思います。

この場合、index.htmlのhead内に以下のソースを追加します。

<script type="text/javascript"><!--
function frameOpen(urlA,urlB){
urlData0=urlA+"<>"+urlB;
urlData0=escape(urlData0);
urlData="SetURL="+urlData0;
document.cookie=urlData;
location.href="frame.html";
}
//--></script>

上のソースで、frameOpen()という関数を定義しています。
リンクは、以下のようなかたちで、関数を呼び出します。

<a href="javascript: frameOpen('left.html','right.html');">リンク</a>
<a href="#" onClick="frameOpen('left2.html','right2.html'); return false;">リンク</a>

ちょっと解説すると、「frameOpen('左フレームのページのURL','右フレームのページのURL')」という形で関数を呼び出し、同時に関数に二つの引数(表示させるページのURL)を渡します。 関数の側では、受け取った引数を変数に格納し、これらのデータをSetURLというキーで定義しつつcookieに書き込み、その後frame.htmlを呼び出します。

次に、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(";");
urlData0=tem1.substring(x2+1,x3);
urlData=unescape(urlData0);
frmlct=urlData.split("<>");
frames[0].location.replace(frmlct[0]);
frames[1].location.replace(frmlct[1]);}
}

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

こうすると、このファイルのロードが完了したときに、cookieからデータを取り出し、それぞれのフレームのlocationを取り出したデータに置き換えることで、cookieに渡されていたURLをそれぞれのフレーム内に表示させます。
それぞれのフレームの表示内容を指定しているのは「frames[x].location.replace()」となっている部分です。 frames[x]はフレームを保持している配列で、これを利用することでフレームの表示内容を操作しています。 なお、各フレームに対してframe要素内でname属性を指定している場合は、「frames["フレーム名"].location.replace()」という形に置き換えても、同様の動作が確保できると思います。 そちらのほうが判りやすければ、ソースを書き直しても良いでしょう。

上記はつい先ほど、似た内容の質問に私が寄せた回答を流用して改造したソースですが、参考になれば。

なお、cookieの利用が好ましくない場合は、index.htmlから新ウィンドウを開いてそちらでフレームページを展開する#1の方の提示されている方法か、強引ですがindex.htmlから子ウィンドウを開いてそこにデータを書き込み、次のページでその子ウィンドウからデータを取り込んで表示内容を調整するという方法もあると思います。
しかし、JavaScriptが有効でない環境では、いずれの方法でもナビゲーションができないので、そういう意味で少々閲覧者の間口を狭めてしまう可能性は残るかもしれません。

参考になれば幸いです。

お礼

lead1976様、
動作確認しました。完璧です。
クッキーを利用する方法があるとは存じませんでした。

ファイルをロードした後に、
クッキーからデータを読み込むタイムラグがほんの一瞬ありますが、
表示には全く問題ありませんでした。

早速使わせて頂きます。
ご回答頂き、誠にありがとうございました。

回答No.1

gimmick

別ウィンドウで開いてもいいのであれば、一応それらしい事はできます。
IE6.0で試しました。もしかしたら、もっと良い方法があるかもしれません。

frame.html----------------------------------------------------------

<frameset cols="50%,50%">
　　<frame src="left.html" name="left_frame">
　　<frame src="right.html" name="right_frame">
</frameset>

index.html-----------------------------------------------------------

<!--スクリプト-->
<script language="JavaScript"><!--
function FramePage(left_page, right_page) {
　　window.open("frame.html", "_blank");
　　window.open(left_page, "left_frame");
　　window.open(right_page, "right_frame");
}
//--></script>

<!--リンク部分-->
<a href="javascript:FramePage('left2.html', 'right2.html')">リンク</a>

お礼

gimmick様、
こちらも動作を確認いたしました。

今回、別窓表示は考えておりませんでしたが、
いずれ別窓表示させたい時のために必要ですので、
是非、参考にさせて頂きます。

ご回答頂き、誠にありがとうございました。