不妨去其他博客看看»» 友链|

使用js为链接自动添加 站外链接提醒

默认分类 · 2023-11-25
AI摘要:本文介绍了如何使用JavaScript为链接自动添加站外链接提醒。通过简单的代码,可以在链接后面添加相应网站的标识,如GitHub、YouTube或Telegram。这样,用户在点击链接时能清楚地知道链接将跳转至哪个外部网站,提升了用户体验和网站可用性。

Powered by AISummary.

效果

  • Before: Github
  • After: Github - 站外链接

正文

Minify:

window.onload=function(){const t=document.querySelectorAll("a"),e=[{url:"github.com",tag:" - Github"},{url:"youtube.com",tag:" - YouTube"},{url:"t.me",tag:" - Telegram"}];for(let u=0;u<t.length;u++){const o=t[u],l=o.href,n=e.find((t=>l.includes(t.url)));o.innerText+=n?n.tag:" - 站外链接"}};
    window.onload=function(){
    const links = document.querySelectorAll('a');
    const websites = [
        { url: "github.com", tag: " - Github" },
        { url: "youtube.com", tag: " - YouTube" },
        { url: "t.me", tag: " - Telegram" }

    ];
    for (let i = 0; i < links.length; i++) {
        const link = links[i];
        const url = link.href;
        const website = websites.find(site => url.includes(site.url));
        if (website) {
            link.innerText += website.tag;
        } else {
        link.innerText += " - 站外链接";
        }
    }
    }
  1. 橙梓 2023-11-27

    wordpress的话,CSS其实就够了

  2. 若志奕鑫 2023-11-26

    直接显示有点影响美观😂😂,可以加到title属性里

Theme Jasmine by Kent Liao RSS
阿里云ECS 2H2G 99元/年| OSS 免费20GB使用
x