targetとは
- ここで説明するtarget とは次の語句からなるjavascriptのプロパティです。
- target
- 読み: ターゲット
意味: 標的、対象
targetプロパティの概要
構文
サンプルを見る前に構文を確認しておきます。
var strSendTarget = form.target;
form.target = strSendTarget;
サンプルコードと実行結果
ここではformからデータを他のページに送信するサンプルを用意しました。 このフォームは送信先のページを、どのターゲットウィンドウで表示するか、選択できるようにしています。 ターゲットの種類は以下の通りです。
- _self
既定値です。閲覧しているページから新たにウィンドウが開かず、閲覧しているページがリンク先に代わり表示されます。 - _blank
新しいブラウジング・コンテキストを開いてリンク先を表示します。 - _parent
現在閲覧しているウィンドウの親があれば、その親のウィンドウにリンク先が表示されます。 - _top
閲覧しているページの祖先のブラウザにリンク先が表示されます。親の閲覧ブラウジング・コンテキストがない場合には、_selfと同じように動作します。
サンプルコード: HTML
<body>
<form name="namForm" target="_self" action="送信先ページのURL" method="GET">
<div><input type="text" value="サンプルテキスト" name="sendData"></div>
<div>
<select onchange="func(this.value)">
<option value="_self">_self</option>
<option value="_blank">_blank</option>
<option value="_parent">_parent</option>
<option value="_top">_top</option>
</select>
</div>
<div><input type="submit" value="送信"></div>
</form>
</body>
- 02-13: form (name="namForm"をもつform要素です。 この要素のtarget属性の値を操作します。)
- 05-10: select (onchange="func(this.value)の部分で、この要素に変化があればscriptコードの02:行目の関数が実行されます。)
サンプルコード: script
<script>
function func(strTarget){
document.forms.namedItem("namForm").target = strTarget;
}
</script>
- 02-4: func(strTarget) (関数です。HTMLコードの05:行目のselect要素のonchange属性で呼び出されます。)
- 03: namedItem("namForm").target (form要素のtargetにターゲットキーワードを代入しています。)