使用 jQuery 在新視窗打開外部連結

我們一般都希望在新視窗打開外部連結，這樣使用者就不需要離開網站就能通路外部連結，但是如果每個外部連結都手工加上新視窗打開的屬性的話，這會讓人非常抓狂，并且 target=”_blank” 也不符合 XHTML 1.0 Strict 标準。

還有有了 jQuery，使用 jQuery，我們隻需要幾行代碼就能在新視窗中打開外部連結。

首先我們需要找到所有的外部連結，在

$(document).ready()

函數添加如下代碼：

上面這段代碼查找 href 屬性是以 http:// 或者 https:// 開始的，并且不包含目前域名（location.hostname）的連結（a）标簽。這樣我們就不會擷取任何相對路徑或者絕對連接配接中含有目前域名的内部連接配接。

如果我們想給外部連結加上 “external” class，添加如下的代碼：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");
      

上面的代碼給外部連結加上一個 CSS Class ，這樣就可以使用 CSS 來樣式化外部連結了。

如果你想外部連結在新視窗打開，繼續增加如下一行代碼：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");
      

上面的代碼給連結标簽增加一個 target 屬性，并且給他指派為 _blank，這樣代碼是标準的，并且外部連結在新視窗打開。上面就是使用 jQuery 在新視窗打開外部連結的所有代碼