クリックでサブウインドウ(小窓)を表示させるスクリプトはそんない難しくないので、コピペで済ましがち。しかし、少しの工夫で、よりユーザにとって親切な実装ができることを知ったので、知識として忘れないようにメモ。

目次

基本知識

小窓表示には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;を忘れないように注意しましょう。

別タブで開けることを確認して見てください。

- Thank you for reading. -

コメント

コメントする