MENU

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

目次

基本知識

小窓表示にはwindow.openを使用します。

こちらでとても詳しく説明されています。

よくある小窓表示の実装コード

まずはよく見る実装コードを見てみます。

//下記のように変数に値が代入されているものとします
$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>
//href属性にスクリプトを記述する方法
<a href="javascript:window.open('sample.html', 'window', <?=$features;?>);">
  リンク
</a>

これら2パターンでも、もちろん実装はできています。下のデモリンクをクリックで開いてみてください。

しかし、一つだけ問題があります。リンク先を開く時、右クリックから別タブで表示を選択し、確実に別タブで表示させたいことはありませんか?

私はその習慣が癖付いてしまっているので、基本的にリンクは右クリックを押して、別タブで開くのですが、上記の実装ではそれができません。ターゲットがブランクとなって真っ白なページが表示されるはずです。試してみてください。

少し工夫した記述方法

解決方法は以下

$features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes";

//onclick属性にスクリプト記述する方法
<a href="sample.html" onclick="window.open(this, 'window', <?=$features;?>);return false;">
  リンク
</a>

href属性にリンク先のurlを記述しておくと、onclick属性のurl部分には" this "でその値を渡すことができます。こうすることで、右クリックからの「別タブで開く」をユーザが選択した場合でも無事にリンク先が表示されます。

また、それだけでは普通にクリックすると元のページまでリンク先に遷移してしまうので、" return false; "を追記しておきます。

 

- Thank you for reading this to the end. -
TOPへ Top