[JavaScript]讓網頁的「外部超連結」自動開啟在新視窗

在編輯網頁時,如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗,我們可以在超連結加上「href="_blank"」屬性,但如果超連結很多,要一個一個加上去畢竟麻煩!!

以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。

一般網頁

  1. 將下列程式碼加到網頁的 <head> 區段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 標籤內的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外掛程式

如果你的網站是用 WordPress 架設,可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen),這樣就不用添加任何程式碼了。

另外需注意,如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用,有可能會造成同時顯示燈箱特效,又同時將圖片開啟於新視窗!!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

  1. Base Tag 是讓 "所有的" 超連結都開啟在新視窗,上面的程式是讓 "本站以外" 的超連結自動開啟在新視窗,站內的超連結還是開啟在原視窗。

  2. 引用通告: 如何讓網頁裡的連結自動在新視窗開啟 | 冷光

  3. Using Google Chrome Google Chrome 5.0.375.70 on Windows Windows 7

    你好
    請問一下
    第二段的parseLink();
    是要加在ONLOAD的哪邊呢? 不好意思我試了很久不行才來詢問的...

    感謝

    下面是我BLOG的程式碼
    --------------------------------------------------------------------------------------------
    google.annotations.createAll();
    google.annotations.fetch();
    }
    google.setOnLoadCallback(initialize);

    ---------------------------------------------------------------------------------------------

  4. Using Mozilla Firefox Mozilla Firefox 3.5.9 on Windows Windows Vista

    To 阿丹:
    找找看樣板裡有沒有 "<body>" 這標籤,改成:
    <body onload="parseLink()">

  5. Using Mozilla Firefox Mozilla Firefox 3.6.7 on Windows Windows XP

    你好,我想請問一下,function的程式碼中有需要修改的地方嗎?

    因為我照著修改還是會在原本的頁面開啟連結,還是說是因為我的網頁是導入的頁面,所以不可以用此方法呢?

  6. Using Google Chrome Google Chrome 7.0.517.41 on Windows Windows XP

    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: Element type "tagA.length" must be followed by either attribute specifications, ">" or "/>".
    好像是判讀小於的問題...奇怪...

  7. Using Google Chrome Google Chrome 7.0.517.41 on Windows Windows XP

    找到解答了 用字符i<代替<

  8. Using Mozilla Firefox Mozilla Firefox 38.0 on Windows Windows XP

    站長您好,我找這個功能很久了,請問在wordpress有方法進行同樣的設定嗎?謝謝!!

      • Using Mozilla Firefox Mozilla Firefox 39.0 on Windows Windows XP

        謝謝回答,已安裝可以正常運行,謝謝^_____^
        p.s. 我有勾選"用電子郵件通知我後續的迴響",可是似乎沒有收到回信...

  9. Using Google Chrome Google Chrome 52.0.2743.116 on Windows Windows 7

    請問,我要如何讓「子網域」也視為「站外」
    讓它在新視窗開啟呢?