【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);

/* * 旋風之音 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);

/*
 * 旋風之音 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/

範例教學

<blockquote class="wp-embedded-content" data-secret="MtmkJdQlf2"><a href="https://blog.reh.tw/archives/805">【jQuery】網頁外部連結警告實作教學</a></blockquote><div class="embed-responsive embed-responsive-16by9 my-3"><iframe class="wp-embedded-content embed-responsive-item lazy" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="【jQuery】網頁外部連結警告實作教學 — 旋風之音 GoneTone" data-secret="MtmkJdQlf2" width="500" height="282" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" data-src="https://blog.reh.tw/archives/805/embed#?secret=M6u3JKMX13#?secret=MtmkJdQlf2"></iframe></div>

-->

<!DOCTYPE html>

<html>

<head>

<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>

<a href="https://www.facebook.com/TPGoneTone/" target="_blank">不判斷外部連結的外部連結</a>

包在 <font color="#ff0000"><content></content></font> 內的連結 Demo

<br>

<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>

<!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>

<!--
    旋風之音 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，並輸入以下程式碼。

/* External Link Warning */

$(document).externalLinkWarning();

</script>

<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/

範例教學

-->

<!DOCTYPE html>

<html>

<head>

<title>您即將前往第三方網頁 | 【jQuery】外部連結警告 Demo</title>

</head>

<body>

<p>您即將前往第三方網頁 (<a href="<?php echo $url; ?>">點此前往</a>)</p>

</body>

</html>

<?php $url = $_GET["url"]; //取得目標網址 if ($url == Null) { //如果目標網址不存在 //header('Location: /'); echo '<h1>$_GET["url"] is null.</h1>'; exit; } ?>  <!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>

<?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