【jQuery】網頁外部連結警告實作教學

3 個月前 |

本篇文章將教您如何實作網頁外部連結警告,使用 jQuery。

以下教學假設 example.com 為網站網域。

當使用者點擊網頁內外部連結時,都是直接轉跳開啟第三方網頁,有些網站卻是會先跳到警告頁面詢問是否前往,本篇文章就是要教您如何實作外部連結警告這功能。

使用 jQuery 寫出判斷,當使用者點擊連結時判斷是否為本站網域,如果是就直接轉跳,不是就轉到外部連結警告頁面詢問是否前往。

首先我們先新增一個檔案,檔名為 jquery.externalLinkWarning.js,然後輸入以下程式碼。

上方的程式碼基本上是不需要做修改的,如果有需要可自行修改。
在第 14、15 行可以交換,把 14 行取消註解,然後把 example.com 修改成您自己的網域,再把 15 行註解掉,這麼做可以判斷多個子網域,例如我今天有 test1.example.com 和 test2.example.com,這樣修改就不會被判斷成第三方頁面了。

接下來新增 index.php,程式碼如下。

以上程式碼為範例,示範了 不判斷外部連結的外部連結外部連結內部連結內部連結 (相對路徑)空連結JavaScript onclick 等等。
在程式碼中,你可以看到需要判斷外部連結的都包在 <content></content> 內,我會這麼寫是因為有些人可能只想判斷內文內的連結,但網頁頭尾不想被判斷。
記得要在頁尾 </body> 前引入 jQuery 和剛剛寫的 jquery.externalLinkWarning.js,並輸入以下程式碼。

我們還要一個外部連結警告的頁面,新增 goto.php 並輸入以下程式碼。

這頁面是最精簡的寫法,當然你也可以自行修改介面和加入其他功能,例如連結預覽。

以上教學結束,下方也提供範例網頁,完整程式碼也已經發布至 GitHub!

範例網頁
https://demo.reh.tw/external_link_warning/

GitHub
https://github.com/GoneTone/external_link_warning-demo


【jQuery】網頁外部連結警告實作教學 - QR Code
本站內容未經授權許可請勿擅自抄襲
如果需引用部分文章內容請註明來源網址

發表時間:2018-08-17 17:00:43
此文章網址:https://blog.reh.tw/archives/805
關於作者
張文相 Zhang Wenxiang 的頭像

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。


分類:教學 程式
標籤:HTML jQuery 外部連結警告 網頁



Facebook 留言