新たなウィンドウでリンク先を開く
さっそく、コンテクストメニューから「新しいウィンドウでリンク先を開く」を選んだときと同じ挙動を実現するスクリプトを書いてみましょう。 リンクをスクリプトを呼び出すきっかけとして利用し、新たに開くウィンドウのサイズは特に指定せず、ツールバーやロケーションバー、ステータスバーなどすべて表示させた状態で、新たなウィンドウでリンク先を開く動作をさせます。
リンクをクリックしたときに、スクリプトを呼び出す書き方には、href属性を利用する書き方と、イベントハンドラを利用する書き方の二つがあります。 今回の場合はスクリプトの記述が比較的少ないので、スクリプトを呼び出す属性に直接処理を書き込む方法と、関数として一連の処理手順をまとめて記述しておく方法の二通りが考えられます。
スクリプト部
ではまず、スクリプト部分についてまとめておきます。 通常のウィンドウと同様に、各種のバーを表示させ、ウィンドウサイズの変更も許可します。 ウィンドウサイズについては特に指定せず、ユーザーの環境に依存させます。 その条件で新しいウィンドウでリンク先を開かせるには、以下のように記述します。
例：
window.open("***.html","_blank","toolbar=yes,
location=yes, directories=yes, status=yes,
menubar=yes, scrollbars=yes, resizable=yes");
// ↑表示の関係で2度折り返していますが、実際には改行は入れないでください。
これで、***.htmlを、特に名前のないウィンドウ("_blank")で開くことができます。 ブラウザの各種のメニュー表示はそのままにするため、すべてyes(「1」と表記しても有効)で指定し、ウィンドウサイズの指定は特に必要ありませんから、記述しません。 この処理で、「新しいウィンドウでリンク先を開く」と同じ動作が得られます。
スクリプトを関数にまとめる場合
関数の定義
関数とは、一連の処理手順をまとめたものです。 関数をまとめておくと、複雑な処理を簡単に呼び出すことができるようになります。 BASICなどで言えば、サブルーチンのような物です。 複数の箇所で同じ処理を繰り返すケースには、スクリプトをコンパクトにできるので、ソースの見通しやメンテナンス性が良くなります。 関数は、ページがロードされる過程で関数自体がロードされる前に、その関数がページから呼び出されないように、<head>内で定義するのがセオリーになっています。 なお、もし関数の定義をページの下端で行った場合、その部分がブラウザに読み出される前にその関数を呼び出すようなことがあれば、スクリプトに誤りがなくてもエラーが出ます。
例：
<script type="text/javascript">
<--
function OpenWin(){
window.open("***.html","_blank","toolbar=yes,
location=yes, directories=yes, status=yes,
menubar=yes, scrollbars=yes, resizable=yes");
// ↑表示の関係で2度折り返していますが、実際には改行は入れないでください。
}
// -->
</script>
上記のソースを<head>内に記述しておけば、その関数を呼び出すことでスクリプトを実行させることができます。 <script>タグ内の「type="text/javascript"」は、その要素内のスクリプトがJavaScriptであることを明示しています。 これはHTML 4.01での記述の仕方で、以前は「language="JavaScript"」という記述をしていました(現在も有効な記述です)。 HTMLのスクリプトとしては、IEではJavaScript以外にVBscriptも使用できるので、どちらのスクリプトを利用しているかを明示する意味で、これらの属性を示しておくのが無難でしょう。 <script>要素内で、スクリプト本体を「<-- 〜 // -->」で囲んでいるのは、<script>要素に対応していないブラウザでは、<script>要素内の記述も表示するものとして処理され、スクリプトのソースが丸見えになってしまうことがあるので、それを回避するためのおまじないです。
関数の呼び出し
今回は、リンクをクリックしたら新しいウィンドウでリンク先を開く動作が目的です。 この動作を実現する記述方法としては、前述した二つの方法が考えられます。 それぞれの記述の仕方について、まとめていきましょう。
まず、href属性を利用する方法です。 href属性でJavaScriptを呼び出す場合は、以下のように記述します。
例： <a href="javascript: OpenWin();">***のページ</a>
ちなみに、この書き方をすると、HTML-lintなどでは警告の対象になります。
次に、イベントハンドラを利用する方法です。 改めて簡単に説明しますが、イベントハンドラは、ある特定の要素に対して、特定のイベントが起きた時に、スクリプトを呼び出して処理を行わせるものです。 イベントハンドラを使用する場合は、以下のような記述になります。 今回はクリックしたときに関数を呼び出したいので、「onClick」を使います。
例： <a href="#" onClick="OpenWin(); return false;">***のページ</a>
これで、クリックされたときに関数を呼び出すことができます。 このリンクのhref属性ではページの遷移を行いたくないので、ダミーの"#"という値を指定しています。 また、その上でさらにJavaScriptからa要素の本来の動作を止めることを期待して「return false;」という記述も、イベントハンドラ内に併記してあります。 href属性をダミー化する方法としては他に、「href="javascript: void(0);"」等といった記述方法もあります。 ちなみに、onClickのイベントハンドラは、a要素以外の要素にも記述することができます。 ここのスクリプトを隠しリンクのようにして利用したい場合などは、a要素以外のところでこのイベントハンドラを記述すればよいでしょう。
関数に一連の処理をまとめる場合は、以上の通りにソースを作成すれば大丈夫です。 関数に処理をまとめておくと、ソースの見通しがよくなります。 が、その関数を呼び出すイベントが単一の場合は、ソースの記述が手軽さに欠けるかもしれません。
スクリプトをタグ内に記述する場合
前述しましたが、タグ内でスクリプトを定義することも可能です。 その場合は、href属性内にスクリプトを記述したり、イベントハンドラ内にスクリプトを記述します。 具体的な記述は以下のようになります。
例：(それぞれ表示上折り返していますが、実際は改行しないでください)
<a href="javascript: window.open('***.html','_blank',
'toolbar=yes, location=yes, directories=yes, status=yes,
menubar=yes, scrollbars=yes, resizable=yes');">
***のページ</a>
<a href="#" onClick="window.open('***.html','_blank',
'toolbar=yes, location=yes, directories=yes, status=yes,
menubar=yes, scrollbars=yes, resizable=yes');
return false;">***のページ</a>
これだけで、目的の動作を得ることも可能です。 なお、この場合、タグ内の引用符とスクリプト内の引用符が、同一にならないように注意する必要があります。 この入れ子の関係を間違って記述した場合、正常に動作しなくなります。 スクリプトの記述を囲む引用符が「"(ダブルクォート)」のときは、スクリプト内の引用符を「'(シングルクォート)」に、スクリプトの記述を囲む引用符が「'」の場合は、スクリプト内の引用符を「"」に揃えましょう。
タグ内にスクリプトを記述するのは、処理自体が単純で、かつ他にそれと同一の処理を行うところがない場合には、特に有効です。 ただし、ソースの記述が混み合うので、メンテナンス性は若干損なわれます。
応用編
同一ページ内の複数のリンクで、新しいウィンドウでリンク先を開く
同一ページ内にある複数のリンクで、それぞれ別のページを新しいウィンドウに表示させたい場合、上記のスクリプトを個別に記述していては非常に不経済で、ソースの見通しやメンテナンス性も悪くなります。 ここでは、関数を利用した記述方法に少し手を加え、同一ページ内にある複数のリンクで、それぞれ別のページを新しいウィンドウに表示させる場合のソースをみていきます。
関数の記述
今度の関数では、呼び出し側から関数内の変数に値を代入するように指定します。 その場合、関数にはあらかじめ、呼び出した箇所からの変数を受け入れるように記述をする必要があります。 この呼び出し側から受け取る変数のことを「引数(ひきすう)」といい、関数名の括弧内でその存在を定義します。 とりあえず、実例を見ていきましょう。
例：
<script type="text/javascript">
<--
function OpenWin(linkurl){
window.open(linkurl,"_blank",
"toolbar=yes, location=yes, directories=yes, status=yes,
menubar=yes, scrollbars=yes, resizable=yes");
// ↑表示の関係で2度折り返していますが、実際には改行は入れないでください。
}
// -->
</script>
この関数では、引数として「linkurl」という変数を定義して、それをwindow.open()メソッドの第一引数に渡しています。 こうすると、呼び出し側から関数に引き渡された引数linkurlが、そのまま関数内の変数linkurlとして扱われるようになります。
なお、この例では必要としませんが、関数に複数の引数を渡したい場合は、それぞれの引数をカンマで区切って関数名の括弧内で定義し、利用します。 複数の引数を定義した関数を呼び出す場合は、呼び出し側でも引数を複数記述する必要があります。 このとき、呼び出し側の括弧内に記述する引数の並び順は、関数の定義部の括弧内で定義された引数の並び順にそのまま対応します。 記述の順番を間違えると、狙い通りの動作をしないこともあるので、注意してください。
呼び出し側の記述
関数の呼び出し側の記述は、前出の関数の呼び出しに加えて、括弧内に引数を一緒に記述します。 それ以外は、以前の関数の呼び出しと同じ記述を行います。
例：
<a href="javascript: OpenWin('***1.html');">***1のページ</a>
<a href="#" onClick="OpenWin('***2.html'); return false;">
***2のページ</a>
このような記述を取ります。 なお、今回は引数として文字列を関数に渡すので、括弧内の文字列は引用符で括っておく必要があります。 このときは、各要素のタグ内にスクリプトを記述するときと同じように、属性値を囲んでいる引用符と、スクリプト内の文字列を囲んでいる引用符が同じにならないように、また入れ子の関係が崩れないように、注意して記述してください。 案外、こういうところで原因不明のエラーが出ることも多いです。
以上のように一連の記述を行えば、複数のリンクから、それぞれ別のページを新しいウィンドウに表示させることが可能になります。