如何实现点击第三方URL自动弹窗（无需手动添加external类）

不需要手动添加external类，我们可以通过自动判断链接是否为外部域名来触发弹窗，核心是对比当前页面域名与链接的域名，同时排除锚点、本地协议链接（如mailto、tel）。

实现思路与代码优化 #

1. 封装外部链接判断函数 #

写一个工具函数，精准识别哪些是需要触发弹窗的外部链接：

function isExternalLink($link) {
    const href = $link.attr('href');
    // 排除锚点、空链接、邮件/电话等非跳转链接
    if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) {
        return false;
    }
    // 创建链接对象解析域名
    const link = document.createElement('a');
    link.href = href;
    // 对比当前页面域名与链接域名
    return link.hostname !== window.location.hostname;
}

2. 修改点击事件逻辑 #

替换原代码中判断external类的逻辑，改用上述函数自动识别：

$("a").on('click', function (e) {
    const $this = $(this);
    if (isExternalLink($this)) {
        e.preventDefault();
        const href_val = $this.attr('href');
        // 用data属性存储链接，避免XSS风险（替代原span存值的方式）
        $('.popupHolder').data('targetHref', href_val).show();
        $('.popupHolder h3 span').text(href_val); // 用text()替代html()更安全
    }
});

$("button.proceed").on('click', function () {
    const targetHref = $('.popupHolder').data('targetHref');
    if (targetHref) {
        window.location.href = targetHref;
    }
    $('.popupHolder').hide();
});

$("button.cancel").on('click', function () {
    $('.popupHolder').hide();
});

3. 关键优化说明 #

• 安全升级：原代码用html()插入链接存在XSS风险，改用text()渲染文本，同时用jQuery的data()方法存储目标链接，避免脚本注入。
• 动态链接兼容：如果页面存在动态生成的<a>标签，建议使用事件委托提升兼容性：

$(document).on('click', 'a', function (e) {
    const $this = $(this);
    if (isExternalLink($this)) {
        // 同上的弹窗触发逻辑
    }
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <h1 id="back">Home</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard
        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen
        book. <a href="https://www.google.com/">Google.com</a> <a href="#about">Hash Link About</a>
    </p>
</div>
<div class="content">
    <h2 id="about">About</h2>
    <p>Lorem Ipsum is simply dummy text of the <a href="https://www.facebook.com/">Facebook.com</a>
        printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard
        <a href="#back">Back to Top</a>
    </p>
</div>
<div class="content">
    <p><a href="https://www.twitter.com/">Twitter.com</a>
        <a href="#back">Back to Top</a>
    </p>
</div>
<div class="popupHolder">
    <h3>Do you want to visit <span></span>?</h3>
    <button class="proceed">Proceed</button>
    <button class="cancel">Cancel</button>
</div>

<style>
.popupHolder {
    display: none;
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
}
</style>

<script>
function isExternalLink($link) {
    const href = $link.attr('href');
    if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) {
        return false;
    }
    const link = document.createElement('a');
    link.href = href;
    return link.hostname !== window.location.hostname;
}

$("a").on('click', function (e) {
    const $this = $(this);
    if (isExternalLink($this)) {
        e.preventDefault();
        const href_val = $this.attr('href');
        $('.popupHolder').data('targetHref', href_val).show();
        $('.popupHolder h3 span').text(href_val);
    }
});

$("button.proceed").on('click', function () {
    const targetHref = $('.popupHolder').data('targetHref');
    if (targetHref) {
        window.location.href = targetHref;
    }
    $('.popupHolder').hide();
});

$("button.cancel").on('click', function () {
    $('.popupHolder').hide();
});
</script>

内容的提问来源于stack exchange，提问作者B104 Sanket naikwadi