みなさん、リンクを別ウィンドウに表示する際、どのようにしていますか?
私はリンク上で、マウス右クリック→[新しいウィンドウで開く(N)]とか、Ctrl+Nキーで新しくブラウザを開いてリンクのコピー&ペーストで表示させています。
上記のような事をしなくても、HP側で新しいウィンドウを開くような設計になっていれば、自動で表示されますよね。
ここではHP側での対応方法について、いろいろ書いてみます。
結構常識ですね。
タグで「<a href="リンク先" target="_brank">リンク名</a>」と書くと別窓で開きます。
サンプルで3月くーまんを表示してみます。特に問題ないですよね?
前項のくーまんの場合、サイズを指定して表示したくなりませんか?
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>これでも若干問題ありますが、対応策は後で解説します。
今までのリンクだと、クリックするたびに新しいウィンドウで表示しますが、物によっては邪魔ではありませんか?
JavaScriptでは開くウィンドウに名前をつけて同じウィンドウで表示できます。
<a href="#" onClick="window.open('リンク先','ウィンドウ名','width=幅,height=高さ')">リンク名</a>
3月くーまん(同ウィンドウ版)
5月くーまん(同ウィンドウ版)
上の2つのリンクは、何回クリックしても同じウィンドウで表示するはずです。
さて、前項の方法では致命的欠陥があります。
初めて別窓で開くときはいいのですが、既に別ウィンドウが存在している状態でリンクをクリックした場合、表示するウィンドウはクリックした親ウィンドウの後ろになってしまいます。親ウィンドウが大きい場合、別ウィンドウが隠れてしまいます。
クリックしたときに別ウィンドウを一番手前にする方法があります。
<a href="#" onClick="w=window.open('リンク先','ウィンドウ名','width=幅,height=高さ');w.focus();">リンク名</a>
今回赤字が追加項目です。2ステップ分の処理をしていて、後半は開いたウィンドウをアクティブ(最前面に表示)にしています。
3月くーまん(同ウィンドウ+アクティブ版)
上のリンクで何度クリックしてもアクティブになるのが確認できます。
また(同ウィンドウ版)を数回クリックして隠れてしまったものも、上記リンクと同じウィンドウ名であればアクティブになります。
確認してみてください。
ここまで説明した段階で、「リンク表示を正しくしたい」で課題とした問題が実感しているかと思います。
リンクをクリックする度にこのページの一番初めに戻されてしまいますよね。 ページがPCの画面に収まってスクロールバーが出ていなければ問題ないでしょうが、縦に長いページの場合非常に不便ですよね。
今回はこの処理をわざとエラーにすることで対処します。
<a href="#" onClick="w=window.open('リンク先','ウィンドウ名','width=幅,height=高さ');w.focus();return
false;">リンク名</a>
3月くーまん(同ウィンドウ+アクティブ+スクロール抑制版)
この場合、JavaScript処理の戻り値がエラーで返されたので、<a>タグの処理が実行されずスクロールせずに別ウィンドウが表示されます。