リンク先のウィンドウ


リンクは、WWW(World Wide Web)の基本ですね。他のサイトへのリンクだけでなく、自己サイト内の各ページやデータ間をリンクさせることにより、 Web ページは単なるテキストファイルとは異なる有機的構造を獲得します。

<IMG> タグで呼び出される画像ファイル、<EMBED> タグで呼び出されるプラグイン、<FONT> タグで呼び出されるフォントデータなど、 タグの多くは広義のリンク機能を持っていますが、普通狭義にリンクと言えば、<A> タグと HREF 属性で指定される Web リソースへのリンクを意味します。

普通は <A href="http://www.umechando.com/"> 電脳レストハウス「梅ちゃん堂」</A> のように HREF 属性を指定するだけで十分ですが、 TARGET 属性を加えてリンク先ファイルを表示するウィンドウ(またはフレーム)を指定したい(或いは、しなければならない)場合があります。 フレームについては、ここではひとまず置くとしてウィンドウについて考えてみましょう。 リンク先ウィンドウの指定には以下のものがあります。各項目をクリックすると "Sample" ページにジャンプします。

定義済みターゲット
  1. target="_self"(現在のフレーム内にページを開く)
  2. target="_top"(ウィンドウ全体にページを開く)
  3. target="_parent"(ウィンドウ全体にページを開く)
  4. target="_blank"(無名の新ウィンドウにページを開く)

最初の 1.〜3. はフレームの有無に関係しています。target="_self" は当該アンカーのあるページにリンク先を表示するということであり、 TARGET 属性を省いた場合と結果的には同じです。target="_top" と target="_parent" はどちらもフレーム内ではなくウィンドウ全体にリンク先を表示しますが、 フレームを使っていないページで見ると、1.〜3. が全く違わないように見えます。その場合は(すでにフレーム付きで見ている場合も)、 ここをクリックしてフレームを表示して下さい。

最後の target="_blank" だけはフレームの有無に関係なく、新しいウィンドウに "Sample" ページが表示されます。 これは特定のウィンドウ名を持たないブランク・ページなので、クリックするたび次々と新しいウィンドウが生成しますが、 なぜか Netscape では "_blank" がウィンドウ名として取得されています。

ユーザ定義ターゲット(例)
  1. target="new"(ウィンドウ名 "new" にページを開く)
  2. target="another"(ウィンドウ名 "another" にページを開く)

仮に "new" と "another" としましたが、半角英字の名前であれば何でも構いません。これらも新しいウィンドウにリンク先を表示しますが、 "_blank" と異なりウィンドウがユニークな名前を持つため、何度クリックしてもリンク先を変えても同一ウィンドウに指定先が表示されることになります。
また、もしフレームを構成するページの1つが "new" や "another" などの NAME を指定されている場合は、新しいウィンドウではなく、 そのフレーム内に表示されるでしょう。

TARGET 属性はフレーム付きの Web ページを使っていてリンク先をフレーム内に表示させないようにする場合や、 フレームがあってもなくてもリンク先を新しいウィンドウに表示したい場合に効果を発揮します。 もしあなたのホームページがフレームを使用している場合、リンク先があなたのサイト内のリソースなら問題ありませんが、 他のサイトをフレーム内に表示するのは特に許可を得ない限りマナー違反ですし、場合によっては著作権問題にもなるそうです。 またリンク先のサイトにもフレーム付きのページがある場合、フレームの中に更にフレームが表示されることになり、 大変見づらくなります。フレームを使用しているページは target="_top" や target="_parent" を付加して他のサイトをフレーム外に表示すると良いでしょう。

アクセスしてきた人を他のサイトに逃したくない場合や、現在のページを引き続き表示させておく必要がある場合は、 target="_blank" や target="(独自のウィンドウ名)" を付加することでリンク先を他のウィンドウに表示させます。

しかし TARGET 属性によって生成したウィンドウは、生成元のウィンドウとの間に何の連絡もありません。 また Web ページの内容だけでなく、ブラウザのツールバーやステータスバー、スクロールバーの有無などをページ開発者がコントロールしたいと思うことがあります。 JavaScript の window.open() メソッドを用いてページを生成させた場合には、これらのことが可能になります。 そう、どこぞやのサイトにアクセスすると小さなサブウィンドウが自動で出現するあれですが、TARGET 属性を使用した場合のように普通の外観のウィンドウを生成することも出来ます。

これは new_window = window.open("(開くページの URL)", "(ウィンドウ名)", "(ウィンドウを開くオプション)"); のように、 必ず変数に代入する形式で行います。window.open("", "") のように最初の2つのパラメータに空白のデータを渡し、3つ目のパラメータを省略すると、 URL の無いデフォルト形式のウィンドウが生成されます。2つ目のウィンドウ名とは、TARGET 属性を指定するときのユーザ定義のウィンドウ名に相当します。 3つ目のパラメータに使われるオプションとして基本的なものは、

directories(リンクバー[IE]、ユーザ設定ツールバー[Netscape 4.x]、ディレクトリボタン[Netscape 3.x])
location
(アドレスバー[IE]、場所ツールバー[Netscape 4.x]、場所の表示[Netscape 3.x])
menubar
(「ファイル(F)」、「編集(E)」などのメニューバー)
resizable(ウィンドウのサイズ変更可・不可)
scrollbars(水平・垂直スクロールバー)
status(ステータスバー)
toolbar(標準のボタン[IE]、コマンドツールバー[Netscape 4.x]、ツールバー[Netscape 3.x])
height(ウィンドウ内の縦サイズ)
width(ウィンドウ内の横サイズ)

の9つがあり、widthheight は width=100, height=100 のようにピクセル数を指定しますが(必ず両方指定しないと Netscape では実現しません)、他は resizable=1(または yes)、scrollbars=1(または yes)、status=0(または no)のように、表示するかしないかを指定します。 注意すべきは、何か1つ指定すると、他のオプションはすべて非表示に設定されてしまう点。resizable と scrollbars を設定し忘れたために、画面のサイズ変更もスクロールも出来なくなっているサブウインドウを時々見かけます。 言い換えれば、これは必ず表示させなければならないという条件だけを 1(yes) に設定して置いた方が良いでしょう。

上の9つの他にも様々なオプションがありますが、下位互換性がなかったり特定のブラウザでしか使えないものが多いため省略します。 興味のある人は HTML や JavaScript の参考書で調べて下さい。

子ウィンドウとしてページを開くオプション
  1. デフォルト表示、ウィンドウ名非指定 window.open("Sample.html","")
  2. デフォルト表示、ウィンドウ名を 'new' に指定 window.open("Sample.html","new")
  3. スクロールバーとステータスバーのみ表示、ウィンドウ名は 'new' に指定 window.open("Sample.html","new","resizable=1,scrollbars=1,status=1")
  4. 同上でかつサイズを500x500に指定 window.open("Sample.html","new","resizable=1,scrollbars=1,status=1,height=500,width=500")

ウィンドウ名非指定の場合は、TARGET 属性で "_blank" 指定した場合のように、クリックするたび次々と新しいウィンドウが生成されます。 ウィンドウ名を例えば "new" に指定すると、TARGET 属性で "new" 指定した場合と同じく "new" の名前を持つウィンドウが生成され、リンク先の URL を変えても必ずこのウィンドウに表示されることになります。 もし TARGET 属性で "new" と指定したウィンドウをすでに開いている場合は、上の 2., 3., 4. をクリックしても新しいウィンドウは開きません。 同じウィンドウ名が複数開くことはないからです。また第3パラメータで指定した定義も反映されません。1つのウィンドウ名は、最初に生成されたときの特徴を保持するからです。

上のようにアンカーから window.open() メソッドを呼び出す場合は、あらかじめページのヘッダーなどで関数定義しておき、<A href="JavaScript:setWin1('Sample.html')"> のように関数を呼び出すのがもう一つの注意点です。
これを <A href="JavaScript:window.open('Sample.html','')"> のように直接メソッドを呼び出すと、このページ自体がオブジェクト名にジャンプしてしまいます。
ヘッダーなどで

function setWin3(PageName){
new_window = window.open(PageName, 'new', 'resizable=1,scrollbars=1,status=1');
}

のように関数定義しておき、アンカー部分で <A href="JavaScript:setWin3('Sample.html')"> のようにこの関数にリンクすれば、パラメーターの PageName にリンク先 URL を入れ替えるだけで良いので使い回しが効きます。

TARGET 属性指定で新規ウィンドウにリンク先を表示する場合と違い、 window.open() メソッドで新規ウィンドウを生成した場合は上の 3., 4. に例示したように第3パラメータのオプションを用いてウィンドウサイズを規定したり、 ツールバーやステータスバーの表示非表示をカスタマイズ出来るというメリットがあります。しかしそれだけでなく、呼び出したリンク元のウィンドウとリンク先のウィンドウの間に親子関係が設定される点が重要です。

例えば new_window = window.open(PageName, 'new') のケースでは、親ウィンドウは new_window という変数名に子ウィンドウの情報を保持しています。 一方、こうして生成された子ウィンドウは window.opener というオブジェクトに親元の情報を取得します。 下の 1. 例では、new_window.location.href に右隣のフォーム内の URL(document.SampleForm.URI.value)を代入し、3. の例では new_window.close() というメソッドを呼び出す簡単なものです。 もちろん new_window という変数が使われなかったり、子ウィンドウが閉じていたりするとエラーになるので、それらを回避するための処理はしています(詳細はソースを参照)。

2. の「子ウィンドウに右の文字を表示」では、new_window.document.open('text/html'); new_window.document.write("(書き込む文字)"); new_window.document.close(); のように、 まずドキュメントをオープンしてから書き込み、最後に必ずクローズするようにしています。しかもここでは 1. や 3. のケースとは違って、あらかじめ window.open() メソッドでウィンドウを新たに生成させています。 が、ウィンドウ名を "new" に指定しているので、すでに "new" というウィンドウ名のウィンドウが開いている場合は、そこに書き込まれるのと同じ効果を持つわけです。

子ウィンドウの制御
  1. 子ウィンドウの URL を右記に変更
  2. 子ウィンドウに右の文字を表示
  3. 子ウィンドウを閉じる

子ウィンドウから親ウィンドウを制御することも、もちろん可能です。 子ウィンドウを開いたときに表示される「親ページの背景色を変更」と「親ページのURLを変更」の2つのボタンを試してみて下さい。

以上、基本的なことしか書けませんでしたが、要は window.open() メソッドを使うことで、TARGET 属性を指定した場合のようにリンク先を新規ウィンドウに表示できること、 第3パラメータのオプション指定でカスタマイズできること、開くウィンドウと開かれるウィンドウの間に親子関係ができ、相互に制御可能になること、の3点にあります。 これらは閲覧者を驚かせるためにではなく、真に実用的な Web システムの構築のために使われてほしいものです。




次のトピックは「スケジュール型カレンダー」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで