网址链接跳转外部安全提醒代码

网页的安全性优化是一个越来越被开发者重视的问题，当本站链接点击跳转到第三方外链接时，要弹框提示信息，需要支持jquery引用 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>网址链接跳转安全提醒 - bokequ.com</title>
            <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
            <style>
            html,body{background:#F3F4F5;font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;padding:0;margin:0;}
            a{text-decoration:none;}
            .urlArea            { padding-top:50px;width:450px;margin:auto;word-break: break-all; }
            .urlArea .logo img  { display: block;margin:auto;margin-bottom: 16px; max-width:350px; }
            .urlArea .main      { background:#fff;padding:24px;border-radius: 12px;border: 1px solid #E1E1E1; }
            .urlArea .flex      { display:flex;align-items:center; }
            .urlArea .btn       { display:flex;justify-content:flex-end;align-items: center; }
            .urlArea .tip       { background:#e8eefa;padding:12px;margin-bottom:16px;border-radius:4px; }
            .urlArea .urlColor  { color:red; }
            .urlArea .urlBox    { font-size: 14px;color: #222226;line-height: 24px;margin-bottom:24px; }
            .urlArea .ico       { width:24px;height:24px; }
            .urlArea .goBtn     { white-space: nowrap;font-size: 14px;background-color: #408ffa;color:#ffffff;border: 1px solid #408ffa;display:inline-block;box-sizing: border-box;padding:6px 18px;border-radius: 18px;margin-left:8px; }
            .urlArea .icoTxt    { font-size: 16px;font-weight: 600;color: #222226;line-height: 22px;margin-left:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; }
            @media (max-width: 600px){
                .urlArea    { padding-top:90px;width:94%; }
            }
            </style>
        </head>
        <body>
            <div class="urlArea">
                <div class="logo"><img src="https://thirdqq.qlogo.cn/g?b=qq&nk=2195335317&s=100" alt="博客趣"></div>
                <div class="main">
                    <div class="flex tip">
                        <img class="ico" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADWUlEQVRoQ+2YvWsUQRiH33fmOMQiRQor7RQSweB9KAQEg1iYKFaZnJJ/wcTOMhLs7Ez8FwLebikasTGCoJDcHSoYQbHRyiKFhajczCu3SS73sbfzsXNJDnLV3s4y83vm3X12dhAG/IcDnh+OAHpVkITISvg2DYyQjwyVcXGt3o9q960CdZELAWC6ERoRn/CgentgAGimOCVJPmsNzJFfx2DjuW8I7xWg+xMZ9enXRwIaaQ2LgJ/Z2aFzvm8l7wBypjBPpB7FzTQiu8uDypLPKngFIDE+rODPFwIYjgUA2GJw7AyGb7d8QXgFkCK/TEB3ksIh4GMeVucOHQCV8qNKwQcCymgA6ozBGJarmz4gvFWgLvKrAHTNLBS+yITVSbNrk6/yAhCnTV04X1pNDdBLmzoAX1pNDZCkTS2EB62mAtBpUwvgQaupAEy0qYdIp1VnAFNtGgCk0qozgJ02tRjOWnUCoFJxUiqZuLJEgB+AbCWKTmqWAE4mYXDGp7C8sapD7Wy3BjDVJke8iUH1aZS/lL8hFUXHvX6uWrUGMNUmByxiWK1sAxTyUqnoOBHCQatWADbadAJw0KoVgJwpLBEpo5WkC0CjOohsmQeVeV21dtuNAWy16QwAaKVVYwBbbboCbM+s+WrVCMBEm50lTwcAYKpVLYCpNrsALDXa7XezTQAtgKk2Y14wVi+yuIfWZBMgEcBGm6bWsLkODbSaCGCjTZtgNtfqtNoTwFabMffwb0DYWQvBLAEdtwm+5/lkrfYEsNVmazgElIzxcSyvr0dLiVu5opL4joC4C0SSVmMBXLTZBoDwnge1863npMjVCKDtnA1ML612Abhqs70C8JPB6VMYhv+iCgiRVfD1OwGcsAndPim4yUaHxjr3VrsAZCk3RwpS718i4gpjdK8RQil8SESzruGbzwODeV6uLXdM1t7fg9amDjBOq20VOAza1EJ0rFabAGm1qRvYVzt2rFabAHWRa3zjetmv9BU2oZ/VTFibarRHACQuXJZQX9uHgb0NwZFdwaDyKgKQorBAoBa99b4PHSHCAx7UFnYqULikUL0mArYPY6ceInrTA05gWHmz9xCL4kWF6ioAZFOP0NcO8C8jerm746H9HuhrFg+dHwF4mMRUXQx8Bf4DeBHHQHvQneAAAAAASUVORK5CYII=" alt="温馨提醒">
                        <div class="icoTxt">请注意您的账号和财产安全</div>
                    </div>
                    <div class="urlBox">
                        <span>
                            <div style="font-weight:bold;padding-bottom:8px;">即将跳转到外部网站<span style="color:#c8c8c8;font-weight:bold;">，安全性未知，是否继续？</span></div>
                            您将要访问的链接不属于本网站，请注意您的账号和财产安全。<br />
                            前往：<a class="urlColor">http://www.bokequ.com/</a>
                        </span>
                    </div>
                    <div class="btn">
                        <label style="color:red;font-size:12px;"><input type="checkbox" id="isOk" value="1" />本人已知晓风险，本人自愿访问，与本网站无关。</label>
                        <a id="goBtn" class="goBtn" href="#" target="_self" onclick="return CheckGoUrl()">继续访问</a>
                        <script language="javascript" type="text/javascript">
                        var goUrl = decodeURIComponent("http://www.bokequ.com/");
                        document.getElementById("goBtn").href = goUrl;
 
                        function CheckGoUrl(){
                            if (document.getElementById("isOk").checked){
                                document.location.href = goUrl;
                                return true;
                            }else{
                                alert("请先打钩左侧【本人已知晓风险】项!"); // ，再点击【继续访问】
                                return false;
                            }
                        }
                        </script>
                    </div>
                </div>
            </div>
        </body>
        </html>

　　

posted @   易客酷云目录  阅读(143)  评论(0)  编辑  收藏  举报
相关博文：
· 微页网站目录模板源码分享
· 蓝色时间轴个人博客网页模板代码
· 网址链接跳转外部安全提醒代码
· 知乎、简书、微博、QQ邮箱、掘金、CSDN、B站等网站外链（跳转链接）研究
· redirect 外链跳转
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示