讓外部連結自動於新分頁開啟

希望的網站當中連結到外部網站的連結,開啟的時候可以用新分頁的方式開啟。
讓使用者在閱讀文章的時候,閱讀延伸資訊的時候,還可以很輕鬆地回來繼續閱讀。

注意,以下只會說明我是如何利用 JavaScript 程式來達成這一個小願望,至於如何讓你自己的網站也可以實現這功能,那就要靠你自己多加努力學會相關的基礎知識後,相信你之後再來看本篇文章就會知道如何實作了。

首先,本段程式碼會需要使用到兩個套件

  1. jQuery
  2. URI.js
$(function() {

$('a').each(function(){
	var href = $(this).attr('href');
	if( href !== undefined  ) {
		var aHost = URI(href).host();
		if( aHost != '' && aHost != location.host ) {
			$(this).attr('target', '_blank');
		}
	}
});

});

程式的作法,就是先找出所有的連結,然後確認他真的是連結。

接下來判斷他是內部連結還是外部連結,如果是外部連結的情況就加入新分頁開啟的設定。如果同一個網域但是不同通訊埠的情況,也是會被認為是外部連結的。

發表留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料