逍遙の窩

我懂得不多;分享我懂的。

2011/05/06

Blogger 讓外部連結自動在新視窗開啟,避免訪客直接跳出

Blogger 筆記:讓外部連結自動在新視窗開啟。
撰寫文章時若要連結軟體官方網站或引用文章,會加入一些外部連結,blogger預設都在同一視窗開啟。文章瀏覽一半時點擊連結就跳開原本網頁,繼續瀏覽要按上一頁非常麻煩。這時可以加入一段程式讓外部連結自動在新視窗開啟,避免瀏覽文章時點擊連結就跳出網站,方便訪客瀏覽網站也增加停留時間。
程式碼:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery("a").each(function(index) {
var r = new RegExp("^https://whhnote");
if (!r.test(jQuery(this).attr('href'))) {
jQuery(this).attr('target', '_blank');
}
});
</script>

將程式碼中"https://whhnote"改成自己部落格的網址。
(例如本站:https://chihchi29)


操作說明:(編輯HTML前先備份範本,備份說明)
Blogger 後台 →「範本」→「編輯HTML」。


找到 </body>,在上面加入程式碼儲存範本。


將程式加入後會自動分辨連結,站內連結在相同視窗開啟,外部連結在新視窗中開啟。

2017/12/23 補充:
上面程式碼的『https://whhnote』,用網址作為判斷是否外部連結。這種方式有個缺點,若使用其他外掛(如:相關文章、隨機文章),先連結外部再導回站內文章,同樣會在新視窗開啟。或是使用自訂網址時,所有連結(站內&外部)都會在新視窗開啟。

可將判斷條件修改成『http://"+document.domain+"』,判斷是否為相同網域,不同網域在新視窗開啟。修改後程式碼如下:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery("a").each(function(index) {
var r = new RegExp("^(http://"+document.domain+")");
if (!r.test(jQuery(this).attr('href'))) {
jQuery(this).attr('target', '_blank');
}
});
</script>


參考文章:
[Blogger] 讓非本站的外部連結, 自動開新視窗-Hank to hanker-Learning Note

8 則留言:

聲明:
● 站內提供下載的軟體經由網路取得,版權皆屬於原創者(公司)。
● 影音下載介紹網站與軟體功能,隨意下載、散播影片可能觸法,請自行注意。
● 本站採用CC授權請勿全文轉貼本站文章,歡迎"部份引用"並註明出處。