外部链接跳转提示

源码分享 · 04-05 15:35

这篇文章将教会你如何为你的网站添加外部链接跳转提示功能。当访问者点击一个指向其他网站的链接时,这个功能会先显示一个警告框,提醒他们即将离开当前网站。这样做不仅可以提高用户体验,还能帮助访问者意识到他们即将访问外部内容,从而增加网站的安全性和透明度。文章会详细讲解设置过程,让你轻松为自己的网站加入这一实用功能。

效果展示

2024-04-05T07:17:54.png

具体操作

1.新建 js 文件

新建一个 js 文件,如:yjvc.js。然后复制以下代码到其中,代码里面的网址为排除跳转中间页(跳转提示页面)。

function checkParent(element, classNames) {
    while (element) {
        if (element.classList && classNames.some(cn => element.classList.contains(cn))) {
            return true;
        }
        element = element.parentElement;
    }
    return false;
}
var excludedClasses = ['card-link', 'friend-item', 'contact-item', 'footer-item']; // 添加需要排除的a标签类名class
window.addEventListener('load', (event) => {
    document.body.addEventListener('click', function(e) {
        let target = e.target;
        while (target && target.nodeName !== 'A') {
            target = target.parentNode;
        }
        if (target && target.nodeName === 'A' &&
            !checkParent(target, excludedClasses) &&
            !target.href.includes('gorpeln.top') &&
            !target.href.includes('gorpeln.eu.org') &&
            !target.href.includes('lab.gorpeln.top') &&
            !target.href.includes('github.com') &&
            target.hostname !== window.location.hostname) {
            e.preventDefault();
            let encodedUrl = btoa(target.href); // Base64 encode the URL
            let url = '/go-wild?target=' + encodedUrl;
            window.open(url, '_blank');
        }
    });
});

2.新建一个 html,如 yjvc.html,并复制以下代码到其中:

<div class="tiaozhuan-all">
    <div class="tiaozhuan-nrong">
        <div class="tiaozhuan-title">即将离开 『 gorpeln's Blog 』 ,跳转到以下外部链接</div>
        <div id="tiaozhuan-link"></div>
        <div class="tiaozhuan-info">请自行识别该链接是否安全,并保管好个人信息。</div>
        <div class="tiaozhuan-button"><a href='' id='direct-link'>继续访问</a></div>
    </div>
</div>
<script>
    const params = new URLSearchParams(window.location.search);
    const encodedTarget = params.get('target');
    const target = atob(encodedTarget); // 使用 atob 进行 Base64 解码
    if (target) {
        document.getElementById('direct-link').href = target;
        document.getElementById('tiaozhuan-link').textContent = '' + target; // 直接显示目标地址    
    } else {
        console.error('未指定重定向目标。');
    }
</script>

3.添加 Css 样式代码,以下样式代码仅作为参考(你也可以根据你自己的主题写一个):

body {
    background: #ececec;
}
.tiaozhuan-all {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -10px;
    border-radius: 10px;
    background: #fff url(../assets/img/go-wild.png) no-repeat center center / cover;
    color: #666;
    word-break: break-all;
    max-width: 700px;
    height: 350px;
    text-align: center;
    font-size: 0.85rem;
    overflow: hidden;
    margin: 100px auto 0;
    @include breakpoint('small') {
        aspect-ratio: 2 / 1;
        height: auto;
    }
}
.tiaozhuan-nrong {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 30px 20px;
}
.tiaozhuan-title {
    font-size: 1.3rem;
    color: #222;
    line-height: 1.4;
    margin-bottom: 4px;
}
.tiaozhuan-info {
    margin-top: 6px;
}
.tiaozhuan-button {
    margin-top: 20px;
}
.tiaozhuan-button a {
    color: #fc9151;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: .85rem;
    border: 0.5px solid #fc9151;
    display: inline-block;
    text-decoration: none;
}

4.引用前面的Js代码

<script src="/yjvc.js"></script>

这里的 src=" " 是你放Js代码的路径,我的是/yjvc.js,换成你自己的即可。

思路

js文件识别链接的a标签,并把链接用 base64 编码,同时排除一些不需要跳转中间页的class或网站。然后跳转到go-wild.html文件中(链接格式为/go-wild?target=base64编码),html文件承担了中间页具体信息,及跳转动作。如使用base64解码跳转的链接。

写在最后

当然,如果你觉得麻烦。你也可以直接下载现成的Typecho外链跳转插件:ShortLinks。

效果展示:

2024-04-05T07:34:40.png

立即下载

完!

Typecho 组件 优化 源码分享

上一篇 : 一段代码实现Sitemap站点地图

下一篇 : 评论时一键自动填写昵称邮箱网址信息


  1. HowieHz   Lv1
    06-18 12:48 第5楼 中国上海市移动Windows 10 · Google Chrome

    这个思路不错,mark 下

  2. 和和   访客
    04-16 20:05 第3楼 中国陕西省西安市电信Windows 10 · Google Chrome

    这个刚好我需要,谢谢啦

    1. 刘郎   博主
      04-16 20:58 第4楼 中国移动iPhone · Safari
      @和和

      能用上就行😎

  3. 冰剑   访客
    04-05 22:31 第1个脚印 中国湖北省武汉市电信Android · Google Chrome

    herf的协议要过滤一下,转换为https与http协议的,否则电话、短信都有中转页了,比如你这个https://vjo.cc/index.php/archives/519/

    1. 刘郎   博主
      04-05 22:48 第2楼 中国移动iPhone · Safari
      @冰剑

      那个之前只是作为演示用,感谢提醒👍,已更正!

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 2 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力