frames

フレーム配列

2009.01.09

構文

　 parent.frames[インデックス].プロパティ

インデクス

添番

説明

JavaScriptでは，HTMLファイル上の「frame」要素の[0]から始まるframes配列を自動的に作成する。これにより，「frame」要素内で設定した「name」属性または「id」属性で参照する以外にも，配列でもフレームを特定できる。

用例

ボタンフォームをクリックした時，フレーム配列「frames[0]」のフレームに，HTMLファイルを読み込む。

【index.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" >
<html><head>
<title>frames</title>
</head>
<frameset rows="*,100">
    <frame src="f1.html" name="f1">
    <frame src="f2.html" name="f2">
</frameset>
<noframes>
フレーム機能を使用しています。フレーム対応のブラウザで試して
ください(^_^)。
</noframes>
</html>


【f1.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>f1</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*フレーム配列
</body></html>


【f2.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>f2</title>
<script type="text/javascript">
<!--
function F_Array() { parent.frames[0].location.href="page1.html" }
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
<form>
    <input type="button" value=" フレーム配列で指定 " onClick=
"F_Array()">
</form>
</body></html>


【page1.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>page1</title>
<style type="text/css">
<!--
body { background-color: #e0ffff; }
-->
</style>
</head>
<body>
<h1>・配列で指定</h1>
</body></html>

※HTMLファイル「index.html」で，「frame」要素を使って，2つの子フレームを作成しているので，各フレームは，HTMLファイル上の上から「parent.frames[0]」，「parent.frames[1]」で参照できる。「f2.html」で，「parent.frames[0].location.href="page1.html"」とすることにより，HTMLファイル上で一番始めに記述されているフレーム名「f1」のフレームに対し，「location」オブジェクトの「href」プロパティを使って，URIの値「page1.html」を設定している。これにより，フレーム配列「parent.frames[0]」のフレームに，HTMLファイル「page1.html」が読み込まれる。子フレームの指定は，用例のように，「parent.frames[インデックス]」と，親フレームから順を追って指定する。