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

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

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

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

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

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

/*
 * 旋風之音 GoneTone
 * https://blog.reh.tw/
 *
 * 範例教學
 * https://blog.reh.tw/archives/805/
 */
;(function($) {
    $.fn.externalLinkWarning = function() {
        $("content a").on("click", function(e) { //當 content a 被點擊時
            var url = $(this).attr("href"); //取得 href 內容

            if (url != null && url.indexOf("http") == 0) { //判斷 href url 是否為空和開頭是否為 http
                //var externalLink = (this.hostname.indexOf("example.com") == -1); //href 網址網域沒有 example.com
                var externalLink = (this.hostname !== top.location.hostname); //href 網址網域不等於頁面網域
                if (externalLink) {
                    //開啟外部連結警告頁面
                    window.open(top.location.protocol + "//" + top.location.host + "/goto.php?url=" + encodeURIComponent(url), "_blank");
                    return false;
                }

                return true;
            }

            return true;
        });
    };
})(jQuery);

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

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

<!--
    旋風之音 GoneTone
    https://blog.reh.tw/

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

-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>【jQuery】外部連結警告 Demo</title>
    </head>
    <body>
        <h1>【jQuery】外部連結警告 Demo</h1>
        <h2>教學文章：<a href="https://blog.reh.tw/archives/805" target="_blank">https://blog.reh.tw/archives/805</a></h2>
        <hr>
        <h4><font color="#ff0000">本範例假設 example.com 為網站網域</font></h4>
        <hr><br>
        <a href="https://www.facebook.com/TPGoneTone/" target="_blank">不判斷外部連結的外部連結</a>
        <br><br>
        包在 <font color="#ff0000"><content></content></font> 內的連結 Demo
        <br>
        <content>
            <a href="https://www.facebook.com/TPGoneTone/">外部連結</a> | <a href="https://example.com/test.php">內部連結</a> | <a href="test.php">內部連結 (相對路徑)</a> | <a href="">空連結</a> | <a href="javascript:;" onclick="alert('測試');">JavaScript onclick</a>
        </content>
    </body>
</html>

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

<script type="text/javascript">
    /* External Link Warning */
    $(document).externalLinkWarning();
</script>

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

<?php
$url = $_GET["url"]; //取得目標網址

if ($url == Null) { //如果目標網址不存在
    //header('Location: /');
    echo '<h1>$_GET["url"] is null.</h1>';
    exit;
}
?>
<!--
    旋風之音 GoneTone
    https://blog.reh.tw/

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

-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>您即將前往第三方網頁 | 【jQuery】外部連結警告 Demo</title>
    </head>
    <body>
        <h1><font color="#ff0000">警告</font></h1>
        <p>您即將前往第三方網頁 (<a href="<?php echo $url; ?>">點此前往</a>)</p>
    </body>
</html>

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

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

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

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