[jquery] 將網址總是以新分頁連結開啟

想像一個狀況,你寫了一堆的部落格文章,每篇文章內總是有許多的連結,但是連結都沒有用新分頁開啟。有一天,你突然想到要將這些連結,都以新的分頁開啟,這該怎麼辦呢?是要一篇一篇去修改,還是自己動手寫 javascript 呢?

如果你會javascript,那最好也不夠了!如果不會,那就要在前人種下的樹乘涼了!而jquery正是你的好夥伴!jquery是一套javascript的framework,我想jquery的教學在網路上有許多,可以使用google去找就找得到,這裡隻介紹一下我們要用到的基本知識。

首先,先舉一個例子來說。以本站而言,如果要以新的分頁開啟本站外全部的連結,那我可以將程式碼寫成如下:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function(event){
       $("a").click(function(event){
          $("a").not("[href*=inote.tw]").attr("target","_blank");
       });
   });
   // ]]>
</script>

 


而在這段程式碼中,用到的學問其實還蠻多的,首先,我們必須先匯入jquery的函式庫,以目前最新的版本是1.3.2來說,必須先寫以下的程式碼。

$("a").click(function(event){
$("a").not("[href*=inote.tw]").attr("target","_blank");});

 

而接下來,因為海芋小站的網域為「inote.tw」,因此我們必須對不是inote.tw的網址都加上屬性「target」,並將值設為「_blank」。也因此,我們使用了jquery中的「not」,這代表著「不是」的意思。

以下列程式碼來說,代表著如果不是海芋小站的網址,就以新的分頁開啟。

$("a").click(function(event){
$("a").not("[href*=inote.tw]").attr("target","_blank");});

 

這程式還有另一種寫法,是直接使用「dotString」這個plugin,而引用的方式可以參考如下:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://path/jquery.string.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
   $(document).ready(function(){ $("a").click(function(event){ 
       if (!$.string($(this).attr("href").include("inote.tw"))){ 
            $(this).attr("target","_blank"); } 
       }); 
   });
// ]]>
</script>

 

其中,「path」代表你放這隻程式的路徑,而我們用以下的程式碼來判別網址中是不是含有「inote.tw」。

if (!$.string($(this).attr("href")).include("inote.tw")){
   $(this).attr("target","_blank");
}

 

看了這段程式碼,一定覺得jquery夠簡單吧!其實這隻是入門而已,還有很多的應用,正等著你慢慢去運用囉!

About 張海芋

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響