2005年06月17日

ポップアップウィンドウ用のスクリプト

別ウィンドウでリンク先ページを開くときよく書くJavaScriptは以下のようなものです。

<a href="page.html" onclick="window.open(this.href)">リンク</a>

でもこれだとメンテナンス性があまりよくありません。

そこでCSSを利用したページデザインのメンテナンスのような方法でこうしたリンク先を指定する方法です。ページのロードの終了時にJavaScriptでDOMを操作します。

まず、適当にpage1.htmlといったファイルを作っておいて、以下のHTMLを試して見てください。

<HTML><HEAD><TITLE>TEST</TITLE>

<script language="JavaScript" type="text/JavaScript">

<!--

function doPopup() {

if (!document.getElementsByTagName) return false;

var links = document.getElementsByTagName("a");

for (var i=0; i < links.length; i++) {

if (links[i].className.match("popup")) {

links[i].onclick = function() {

window.open(this.href);

return false;

}

}

}

}

window.onload = doPopup;

//-->

</script>

</HEAD>

<BODY>

<a href="page1.html" class="popup">別ウィンドウで表示</a>

<a href="page1.html">同じウィンドウで表示</a>

</BODY>

</HTML>

非常にシンプルになりました。

投稿者 bookmarklet : 20:25 | トラックバック