Clement in a Nutshell

我想很多人把網頁改為 XHTML 1.1 或 XHTML 1.0 strict doctype 時都會遇到一個問題：就是 hyperlink 不能再用 target 指定開啟新視窗，w3c 更指出你要是堅持用 target 的話就要使用 XHTML 1.0 transitional。

但我們在建立符合標準的網頁時，不能使用 “新視窗” 這種說法很缺說服力，尤其大多數人會堅持外部連結應要用 “新視窗” 來演示，故我們必須找個兩存其美的方法，既能符合網頁標準，亦能保持開啟新視窗這個操作模式。

其實我們可以利用 hyperlink 的 rel attribute，先把外部連結的 relationship 定義為 “external”，再透過 JavaScript 的 DOM ，把 rel=”external” 的連結加上開啟新視窗的 event，就能達成外部連結用 “新視窗” 開啟這個目的，又能保持網頁的 Semantic Markup。

明白原理其實就可以寫 code：

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")
			if (anchor.addEventListener)
				anchor.addEventListener("click", newWindow, false);
			else if (window.attachEvent)
				anchor.attachEvent("onclick", newWindow);
			else
				anchor.onclick = newWindow;
		}
}
function newWindow(e) {
	if (!e) var e = window.event;
	var a = e.target ? e.target : e.srcElement;
	var newwin = window.open(a.href);
	// prevent default action of the link
	if (newwin && e.preventDefault) e.preventDefault();
	// if the new window cannot open, use the original window to load the page
	return !newwin;
}
if (window.addEventListener)
	window.addEventListener("load", externalLinks, false);
else if (window.attachEvent)
	window.attachEvent("onload", externalLinks);
else
	window.onload = externalLinks;

下載原始檔

參考資料：

• New-Window Links in a Standards-Compliant World
• Standards-based Replacement for target="_blank" in External Links

範例：
例如我想別人在看到這個耗資逾億的政府新網站連結時不會再看不到我的 cheap blog，我現在就可以用新視窗開啟了。