2009年5月14日 木曜日
悩ましいtarget=”_blank”問題に対するシンプルな解
XHTML 1.0 Strictではanchorタグにtarget=”_blank”属性を設けて、新規ウインドウでリンク先を開くことが認められていない。
私自身、いまだにtransitionalを主流にしているのであまり深くは考えてきていなかったのだが、先日、知人から「どうすれば最もシンプルに解決できるのか?」という質問を受けた。
Javascriptを使って新規ウインドウで開くのは手法として当然のことだが、ここで「シンプルに…」と言われて、catswhocode.comの8 awesome JQuery tips and tricksという記事を思い出し、ちょっと手を加えてみた。
手筈は極めて簡単で、anchorタグにrel属性で特定の名前を与えておいて、jQueryを使ってその名前を持つものだけ新規ウインドウで開くというやり方（一応これがデモページ）。jQueryをロードした後、以下のスクリプトを実行させるだけで済む。
<script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
//-----------
$("a[rel^='extlink']“).click(function(){
this.target = “_blank”;
});
//———–
});
// ]]></script>
ソースにあるとおり、ここではanchorタグのrel属性にextlinkで始まる値を持つものだけを対象にしている。
至ってシンプル。もちろんW3CのMarkup Validationもキチンと通る。デモページではcssにも細工を持たせ、外部リンクを明示的に示すアイコンも表示できるようにしてあるので、興味があれば参照してほしい。
