フレームで画面を分割したとき、１つのリンクで複数のフレームを同時に切り替える方法のお話です。
まずはこれを見てください。
それで、１番下のフレームのｍｅｎｕのところのリンクをクリックしてみてください。
同時にいくつかのページが切り替わります。
◆
それでは、まずソースから・・
フレームを設定したページにはこのようにフレームタグを書いています。
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="150,*,100">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
</frameset>
<frame src="menu2.html" name="f5">
</frameset>
|
name=""のところで、フレームに適当に名前を付けています。
つまり、左の図のように設定したわけです。
そして、”ｆ５”という名前を付けたフレームに表示するのが、
menu2.htmlです。
次に、menu2.htmlのソースを下に書きましょう。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<link rel="stylesheet" type="text/css" href="../../../mys.css">
<title> </title>
<STYLE TYPE="text/css">
<!--
p,div{font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#400040}
a:link{color:#191970}
a:hover{color:#191970}
a:visited{color:#191970}
-->
</STYLE>
<script language="JavaScript">
<!--
function henka1(){
parent.f1.location.href="kawatta.html";
parent.f3.location.href="kawatta.html";
}
function henka2(){
parent.f1.location.href="frame1.html";
parent.f3.location.href="frame3.html";
parent.f2.location.href="kawatta.html";
parent.f4.location.href="kawatta.html";
}
function henka3(){
parent.f1.location.href="frame1.html";
parent.f2.location.href="frame2.html";
parent.f3.location.href="frame3.html";
parent.f4.location.href="frame4.html";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<div align="center">
<font color="darkcyan"><b>＊−＊−＊−＊ｍｅｎｕ＊−＊−＊−＊</b></font><br>
<a href="#" onClick="henka1()">｜変化１｜</a>
<a href="#" onClick="henka2()">｜変化２｜</a>
<a href="#" onClick="henka3()">｜元に戻す｜</a>
</body>
</html>
|
今回のお話に関係があるところを色づけしておきました。
さて、おおむね赤い色で書いている部分がＪＡＶＡスクリプトです。
（ＪＡＶＡスクリプトも半角の英数字で書きますよ。）
<script language="JavaScript">・・スクリプト記述タグ
<!--
（このように囲まれた部分に、なにやら、いろいろ書いている。）
//-->
</script>・・スクリプト記述タグの終わり
スクリプトというのは、プログラム言語の一種です。
一般的にプログラム言語は、それ専用の言葉を文字で書いてから、それをコンピューターにとって、より理解しやすい形に変換する作業を行います。それをコンパイルなどと言う。
（つまり、プログラム言語を書いただけではコンピューターはそれを理解できない。）
しかし、スクリプトといわれるプログラム言語は、専用の言葉を文字で記述するだけでコンピューターが動いてくれるお手軽プログラム言語です。
ＨＰで使われているのは、ＪＡＶＡスクリプトの他に、ＶＢスクリプト、掲示板などのＣＧＩで使われるＰｅｒｌなどがあります。
|
最初の
<script language="JavaScript">というのは、
”ここから書いてあるのは、いろいろあるスクリプトのうち、ＪＡＶＡスクリプトというものを書きますよ。”
という意味です。
そして、
</script>は、”ここまでがそうですよ。”という意味です。
さらに、その中を
<!-- //-->で囲みます。
これには、見た人の画面にＪＡＶＡスクリプトを書いた中身が画面に表示されてしまうことを防ぐ働きがあります。
では、その中身を説明しましょう。
（・・と言っても、私も良くわかってない。（*￣m￣)ぷっ！）
function henka1(){
parent.f1.location.href="kawatta.html";
parent.f3.location.href="kawatta.html";
}
まず、↑このひとまとまりを見てください。
function henka1(){
｝
の、｛ ｝でくくられています。そして、その中に２行のスクリプト。
一つは
parent.f1.location.href="kawatta.html";です。
f1は、
このページの最初の方にかいている”フレームのタグでのフレームにつけた名前を書いています。つまり、一番上のフレームを指定しています。
location.href="kawatta.html（表示したいページのアドレス）" で、最初に表示していたＨＴＭＬファイル（この場合
frame1.html）があったところに、新しく表示したいＨＴＭＬファイル（この場合
kawatta.html）を表示することになります。
f1と名付けたフレームに
kawatta.htmlを、表示するということです。
それと、頭に
parentとついています。
ＪＡＶＡスクリプトでは、自分自身（つまり、このＪＡＶＡスクリプトが書かれている
menu2.html）を
selfと表現して、フレームを設定したページを、親ページ（
parent）と表現する事になっています。
ま、フレーム枠のページがまずあって、その枠の中にそれぞれページが表示されているんだから、親子と言えなくもないか！
ということで、日本語に訳してみると・・
| parent. | f1. | location.href="kawatta.html" | ; |
| 親ページで | f1と名付けたとこに | kawatta.htmlを表示してちょ！ | １つの作業終わり。 |
．を見落とさないでね。アドレスやＪＡＶＡスクリプト言語は１文字でも違うとうまく動かないのです。
それから、後に
; をつけます。”１つの作業がここで終わり”ということを示します。
そして、もう一つ似たようなのがあります。
その次の行の
parent.f3.location.href="kawatta.html";ですね。
これも、同じ事ですが、今度は
f3と名付けたフレームを指定しています。
◆
さて、もう１度このひとまとまりを見て・・
function henka1(){
parent.f1.location.href="kawatta.html";
parent.f3.location.href="kawatta.html";
}
これは、
function henka1(){この２行を１セットにして、henka1()という名前を付けた}
というふうに、いくつかの作業を１セットにして、それに名前を付けるということだと思ってください。
（ＪＡＶＡスクリプトでは、関数を定義すると言います。）
◆
そして、ｂｏｄｙに、こんなのが書かれています。
（menu2.htmlのソースの下の方）
<a href="#" onClick="henka1()">｜変化１｜</a>
これは、リンクタグですが、アドレスを書くところには # が入っています。ここのところではアドレスを指定しないので、とりあえずダミーとして入れてます。
大事なのは、
onClick="henka1()"
日本語に訳すと、「クリックしたら、
henka1()を、やっちゃう！」ということです。
onClick=""は、ＪＡＶＡスクリプトではありません。
ＤＨＴＭＬのイベントハンドラと言うものです。
ＨＴＭＬのタグのなかに、属性と同様に書きます。
これで、ｍｅｎｕのページの「｜変化１｜」と書いてあるところをクリックすると、ＪＡＶＡスクリプトの
henka1()と名付けた１セットの作業が実行されます。
◆
あと、残りの
henka2()、
henka3()も、基本的に同じ仕組みです。
指定した場所に、指定したＨＴＭＬファイルを表示する作業、複数を１セットにして、それをイベントハンドラで実行するようにしておくと、フレームのページを１度に複数切り替えられます。
ただし、見ている人がＪＡＶＡスクリプトをｏｆｆにしていると、ぜんぜん働きませんよ！
◆
( -_-)旦~ フゥ・・今回は疲れたな・・お茶飲も！
このページを読んでくれた人も、お疲れさま。
ま、お茶でもどうぞ！( -_-)旦~・・・
（自分でいれて！）（*￣m￣)ぷっ！