「リンクを別窓に表示」をいろんな手法で行う

みなさん、リンクを別ウィンドウに表示する際、どのようにしていますか?
私はリンク上で、マウス右クリック→[新しいウィンドウで開く(N)]とか、Ctrl+Nキーで新しくブラウザを開いてリンクのコピー&ペーストで表示させています。
上記のような事をしなくても、HP側で新しいウィンドウを開くような設計になっていれば、自動で表示されますよね。
ここではHP側での対応方法について、いろいろ書いてみます。

target="_brank"

結構常識ですね。
タグで「<a href="リンク先" target="_brank">リンク名</a>」と書くと別窓で開きます。
サンプルで3月くーまんを表示してみます。

3月くーまん(target="_brank"版)

特に問題ないですよね?

指定サイズで別窓

前項のくーまんの場合、サイズを指定して表示したくなりませんか?
Java Scriptを使用すると、指定サイズで別窓表示できます。
先ほどのリンクを次のように書き換えます。
<a onClick="window.open('リンク先','','width=幅,height=高さ')">リンク名</a>
これをくーまんでサンプル表示します。

3月くーまん(JavaScript版)
リンクにアンダーラインが無いですが、問題なく別窓で開くはずです。

リンク表示を正しくしたい

前項でアンダーラインがないのは無いのは<a>タグにhref属性が無いためで、もしhref属性を使用した場合<a>タグとJavaScriptの両方でページ移動してしまいます。

例)<a href="'リンク先" onClick="window.open('リンク先','','width=幅,height=高さ')">リンク名</a>
3月くーまん(2ページ移動してしまう失敗版)

気になるようでしたら、次のように自分のページを指定してみてください。
<a href="#" onClick="window.open('リンク先','','width=幅,height=高さ')">リンク名</a>

3月くーまん(自ページジャンプ版)

これでも若干問題ありますが、対応策は後で解説します。

同じウィンドウで表示

ウィンドウをアクティブにする

クロールをしないようにする

終わりに

[実験君][HOME]