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

2018-08-17 |

本篇文章將教您如何實作網頁外部連結警告,使用 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


【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 留言