MT100本をAmazonで購入!

target="_blank"を使わずに別ウィンドウで開く

11月19日(日)11:14

category
JavaScript

通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか?
と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。

例えば下記で紹介されているような。
http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/

コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。

今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。
って教わったので、今回はそのやり方を紹介いたします。

---- こっから続き

取り合えず、何だかんだ言って結局JavaScriptを使うわけですが...

まずは下記のスクリプトを用意。

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload=externalLinks;

コレをhead要素の範囲内に、

<script src="../js/external.js" type="text/javascript"></script>

のような感じで読み込む。
リンクの方には、通常下記のようになっているのを、

<a href="/index.shtml" target="_blank">トップへ</a>

rel属性に変える。

<a href="/index.shtml" rel="external">トップへ</a>

↑こんな感じで。

コレでOKです。
さすがにtarget="_blank"に比べると面倒ですが、自分が今まで知ってた方法と比べれば随分スマートかな、と思います。
JavaScriptがOFFだとただのリンクですが、別窓でどーしても開いてくれなきゃ致命的とかそんな事は有り得ないかと思うので問題ないと思います。

この方法に関して色々ググってたらコレが元ネタか!ってエントリーが見つかったので、あわせて参考にして下さいまし。
もっと詳しく色々載ってます。

tcervo.com
http://tcervo.com/index.php?p=18

hori-uchi.com
http://hori-uchi.com/archives/000424.html

各種SBMに追加
  • Hatenaブックマークに追加
  • del.icio.usに追加
  • POOKMARK Airlinesへ追加
  • livedoorクリップへ追加
  • ニフティクリップへ追加
  • newsingへ投稿
  • Redditへ追加

comment [5]

1 - おすぎ さん

こんにちは&はじめまして~
mixiの◆ホームページ公開掲示板から飛んでまいりました.
少し興味あるテーマだったので足跡がてら書き込みさせて頂きます.
「target="_blank"」・・・私もこの非推奨属性,使ってます.
やはり外部リンクとかに飛ぶときには,自分のページのウィンドウ
を残しておきたいという我がまま意識がはたらいてしまって・・・

ご存知のことだと思いますが,これが非推奨となってる理由は
「別のウィンドウを開くかどうかは閲覧者の意思にまかせるべき」
という考えが根底にあるからということですよね~

だとするとhtmlの言語上,非推奨だから別の手段でこれを実現する,
というのもこの考え方には則っていないような気がします.
(すみません.お気を悪くなさらないで・・・

それでは・・・

URL|2006年11月20日 23:40

2 - ひら@管理人 さん

はじめましてー
Mixiからいらしてくれるとは思いもしませんでした。
気を悪くするどころか、かなり嬉しいっす。

ウチのサイトでも外部リンクは殆どが別ウィンドウにしちゃってますが、それに慣れてしまっているユーザーの方が多数居るって思ってます。
ボク個人もそうですが、知識なんて何も無い頃見てたサイトの大半が外部リンク=別窓だったのも今の自分を形成しちゃってる一つかもしれません。
もちろん、理由はわかってはいるんですけどね。

そういえばikesai.comでも、そんな調査やってたと思うんですけど、やっぱり別窓派が多かったっていう現実もあり、仕様に忠実じゃないボクは、OKだと思っちゃいます。

推奨はしないけど、許容範囲みたいな?

2006年11月21日 00:28

3 - おすぎ さん

レスをして頂きましてありがとうございます。

私もこれまでは外部へのリンクについては「target="_blank"」
を記述し、別窓を開くアクションを念頭においてきたのですが、
firefoxがメジャーになってきてから必ずしも「target="_blank"」=「別窓」ではなくなってきています(デフォ
ルトのままオプション設定しなければ「target="_blank"」の記
述は無視される)ので最近「そろそろ考えを改めないといけないか
なぁ」とも思い始めています。

ie7の情報はまだ仕入れてないのですが、firefoxと同様のオプション対応になった場合は、なおさらですね。

とりあえず直近では「target="_blank"」のままで様子見ですけど。

ryoさんご提示の方法(JavaScript)だとfirefoxのオプション
との兼ね合いでどんな挙動になるんでしょうか?「target="_blank"」と同じなんですかね?今度試してみようかな。

2006年11月21日 14:04

4 - ひら@管理人 さん

遅レスすみません。

リニュ後、今回のを試して見たので、実際の挙動はすぐにわかると思いますー。

IE7だとデフォルトの設定の場合、
別窓で開いちゃうので、ちょっと困ります。
別タブがデフォルトだったら助かるんですが。

2006年12月 9日 13:43

5 - 通りすがり さん

通りすがりの者です。

>非推奨だから別の手段でこれを実現する,
>というのもこの考え方には則っていないような気がします.

これには私も同意します。

target="_blank"に関しては、
http://deztec.jp/design/04/08/000451.html
↑ここを一度読んでみるといいかもしれません。

target="_blank"を使い続けるにしろ、W3Cの考えに従って使わないにしろ、考え方が変わると思います。いろんな意味で。

では、失礼いたします。

2007年6月20日 17:20

コメント投稿フォーム

post your comment

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。

ブログパーツ

フィードメーター - CSS HappyLife

Feeds購読数

あわせて読みたい

change color or layout
  • デフォルトカラー
  • 薄い青
  • 青緑
  • 緑
  • 青
  • 薄い紫
  • ピンク
  • 黄金
  • 茶
  • 赤
  • 黒
  • 白
  • シルバー
  • 2カラム(カラーはデフォルト)
  • リキッドレイアウト(カラーはデフォルト)

ページトップへ