リンク先をクリックしてサブウインドウ（小窓）で表示させるときは、window.openを使うと簡単。
このスクリプトはそんない難しくないので、コピペで済ましがちですよね。
しかし、よく見かけるコードをそのままコピペすると、リンクを右クリックして「新しいタブで開く」を使うとうまく開きません。
今回は、window.openをこの「新しいタブで開く」に対応させる方法をご紹介していきます。
少しの工夫で、よりユーザにとって親切な実装ができるので忘れないようにしておきたいです。
基本知識
小窓表示にはwindow.openを使用します。
よくある小窓表示の実装コード
まずはよく見る実装コードを見てみます。
例1
<!-- 下記のように変数に値が代入されているものとします -->
<?php $features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes"; ?>
<!-- onclick属性に小窓表示のスクリプトを記述 -->
<a href="javascript:void(0);" onclick="window.open('sample.html', 'window', <?=$features;?>);">
リンク
</a>
onclick属性を使わず、href属性だけのパターンもありますね。
例2
<!-- 下記のように変数に値が代入されているものとします -->
<?php $features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes"; ?>
<!-- href属性にスクリプトを記述する -->
<a href="javascript:window.open('sample.html', 'window', <?=$features;?>);">
リンク
</a>これらのコードで、小窓表示の実装自体は問題なくできています。
下のデモリンクは上記のコードを実際に再現したものです。クリックして開いてみてください。
問題なく表示できていると思います。
しかし、冒頭で述べたように、一つだけ問題があります。
リンクを右クリックし、「新しいタブで開く」を選択してみてください。
空白のページが表示されてしまったかと思います。
こんな細かいこと気にするか？と思うかもしれないですが、ネットサーフィンに慣れている人は、タブを複数開きながら作業することが多く、リンクを開く際は常にこの「新しいタブで開く」を選択する癖がついている人もいるほどです。（実際に、私がそうです）
最近のマウスではスクロールボタンが標準で「新しいタブで開く」のショーカットボタンになっており、普通のクリックと同じ感覚で別タブ表示ができます。
少し工夫して「新しいタブで開く」に対応させてみる
では実際に、別タブ表示に対応させてみましょう。
新しいコード
<?php $features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes"; ?>
<a href="./sample.html" onclick="window.open(this, 'window', <?=$features;?>);return false;">
リンク
</a>href属性にリンク先のurlを記述しておくと、onclick属性のurl部分には" this "でその値を渡すことができます。
こうすることで、href属性にURLがちゃんと含まれているので「新しいタブで開く」でリンクを開かれた場合でもそのURLが表示されます。
別タブで開けることを確認して見てください。
普通にクリックした時にhref属性のURLへ飛ばないように、onclick属性の中のスクリプトではreturn false;を忘れないように注意しましょう。
