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