JavaScript

始点アンカー（href 属性を持つ A 要素）によるリンクは、当該要素を始点側アンカーとし、一つの終点側アンカーを指し示す事しか出来ません。このようなリンクを単純リンクと呼びます。

しかし、一つのフレームから複数のフレーム枠内を同時に変更したい場合などがあるでしょう。そういう場合には Java Script を利用します。

ここではサンプルとして、 a フレーム内のファイルのリンクから、 b, c フレーム内に表示するファイルを同時に変更する事にします。

フレーム文書の構成です；

<frameset rows="20%,*">
  <frame src="a.html" name="a">
  <frameset cols="30%,*">
   <frame src="b.html" name="b">
   <frame src="c.html" name="c">
  </frameset>
  <noframes>...</noframes>
</frameset>

a.html 内の記述です；

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>sample-a</title>
<!--デフォルトで用いるスクリプト言語の指定-->
<meta http-equiv="content-script-type" content="text/javascript">
<!--javascript の記述-->
<script type="text/javascript">
<!-- to hide script contents from old browsers
function jump(x1, x2) {
  window.open(x1,"b");
  window.open(x2,"c");
}
// end hiding contents from old browsers  -->
</script>
</head>
<body>
<p><a href="javascript:jump('d.html', 'e.html')">click me!</a></p>
</body>
</html>

【ファイル】

ちょっとした解説

ここではスクリプト内をサポートしていない古いブラウザが表示してしまうのを避ける為にコメントアウトしています。

HTML では通常のコメントアウトは  までですが、今の場合は特に Javascript のコードではない事を示す為に // を挿入しました。単一行内でこれの後ろはコード内でコメントアウトされます。

メタ宣言文で、このファイル内で通常使うスクリプト言語タイプを指定しています。それと同時に SCRIPT 要素にも MIME タイプを text/javascript と宣言しています。

しかし、この MIME タイプは W3C の仕様書中で例文として採り挙げられてはいるものの、 IANA に登録された正式な MIME タイプではありません。

似た属性として、 SCRIPT 要素における language 属性が有ります。こちらは廃止予定ですが、古いブラウザがサポートしている、スクリプトのバージョンが指定できるなどのメリットも有ります。ここで記述した JavaScript のバージョンは JavaScript1.2 以降です。

ではこの HTML 文書内のスクリプトの動作を順を追って見てみましょう。まずはリンクをクリックします；

リンクをクリックすると同時に、 javascript 関数 jump(x1,x2) が呼ばれます。

関数 jump(x1,x2) は「ウィンドウ内の或る子フレーム (a, b) に、或るファイル (x1,x2) を表示する」と云う内容になっています。

関数名 jump は任意に指定できます。しかし、規定のメソッドなどと重複してはなりません。

上のスクリプトで、リンク内の関数値 x1,x2 と、関数定義内のフレーム名 b, c を変更すれば自由にカスタマイズできます。

JavaScript では扱う対象を「オブジェクト」として取り扱います。この例では、ナビゲータオブジェクトの最上位階層の一つである window オブジェクトから始まっています。これに window オブジェクトが選択し得るメソッドの一つである open() が続きます。

open() メソッドは、 open(URL, フレーム名) の形で値を取ります。このフレーム名には HTML の予約済み target 名も全て使う事が出来ます。

ここでは、クリックイベントを拾うのに href="javascript:" を利用しましたが、イベントハンドラ onclick （ onclick 属性）を利用しても出来ます。

また、ここで記述したスクリプト以外でも、 location オブジェクトのプロパティ href に値を代入することで、指定した URL に有る文書が、 window.parent.b に表示させることも出来ます。

JavaScript はそもそも Netscape 社の独自拡張から始まり、現在も各バージョンが乱立している状態で標準規格ではありません。安定して動作する保証は何処にもありません。

一応標準規格化された JavaScript (ECMAScript) も存在しますが、これはスクリプトの言語仕様を規定しただけで、その実装はバージョンによって異なります。これに準拠した言語は、 Netscape 社の JavaScript1.3、 Microsoft 社の JScript4(5?) がありますが、これらの間の互換性は完全ではありません。

スクリプトをサポートしていないブラウザへの配慮

I.E. も JavaScript をサポートし、なぜかこちらの方が完成度が高いようですが何れにせよブラウザのバージョンによって動作が一定しない代物です。ここに挙げたスクリプト程度はブラウザによらず動作するはずですが、 JavaScript を利用する場合には、サポートしていないブラウザの可読性を損なわない様に十分注意しなければなりません。

スクリプトをサポートしていないブラウザの可読性を損なわない為に、 NOSCRIPT 要素があります。 SCRIPT 要素は INLINE 要素でしたが、 NOSCRIPT 要素は Block-level 要素です。

NOSCRIPT 要素の使い方は NOFRAMES 要素に似ていますが、 SCRIPT 要素内で記述するわけではない事に注意して下さい；

ブラウザの環境変数をスクリプトで取得し、読み込みページを振り分ける事も有効でしょう。

複数フレーム枠の同時更新

ちょっとした解説

スクリプトをサポートしていないブラウザへの配慮