外部リンクを別窓で
2005/01/10 Mon 00:59
一昨日のこの記事を書いてから、外部リンクだけを別窓で開くかどうかを訪問者が選べる機能をなんとかつけられないかと検討してたんですが、とりあえず作ってみました。フォームにチェックが入るとリンクアンカーのhref属性の値(リンク先のURL)をパターンと照合し、設定値(ローカルのURL)にマッチしたもののtarget属性に"_self"を、それ以外には"_blank"を入れます。再びチェックを外すと全てに"_self"を入れます。利用する際はhttp://cu39.s57.xrea.com/の部分をそれぞれのURLに変えて下さい。
<head>
...
<script type="text/javascript">
<!--
// thanks to randomwalks.com
// and to http://www.sitepoint.com/article/standards-compliant-world
function externalLink(myArg) {
var regpat = "http://cu39.s57.xrea.com/";
var where;
if (myArg) where = "_blank";
else where = "_self";
for (var i=0; i<document.links.length; i++) {
if (document.links[i].href.match(regpat) == regpat) {
document.links[i].target = "_self";
} else {
document.links[i].target = where;
}
}
}
// -->
</script>
</head>
<body>
...
<form action="">
<div>
<input
type="checkbox"
style="margin-left:0em;padding-left:0em;border-width:0px;"
name="targetbox"
id="anchorcheck"
onclick="externalLink(this.checked);" />
<label for="anchorcheck" style="cursor:pointer;">
外部リンクを別窓で開く
</label>
</div>
</form>
...
</body>
自分でJavaScriptを書く(というか改造する)こと自体がはじめてだったのでけっこう苦労した……わりにはバグというか、問題があります。
- フォームにチェックを入れる
- 外部リンクをクリック
→ 別窓でリンクが開く(ここまではOK) - http://cu39.s57.xrea.com/ 内の別の記事へのリンクをクリック
→ 同じ窓でリンクが開く - BACK ボタンで戻る
→ まだフォームにチェックが入っている - 外部リンクをクリック
→ 同じ窓でリンクが開く(NG)
とりあえずここまで。力尽きた……ひとまず正当なXHTML 1.0 Strictになりました。
追記:上の手順はローカルで試した結果だったんですが、サーバに上げてみたら手順4でBACKボタンを押したあと、チェックが入ってない状態に戻るみたいです。これはこれで中の記事を移動しながら読むときに都合が悪いけど、表示を裏切ってはいないからよしとしておこう。
FB.com