如何让我网站上的所有外部链接得到确认

Question

我正在尝试让我网站上的所有外部链接都发出确认消息“您正在被重定向到外部网站”。我知道如何编写 JS 来检查链接是否是外部的以及如何提高确认，但是有没有一种方法可以将其应用于我网站中的每个链接而无需单独执行？链接的格式始终为<a href=URL> Link </a>。角度脚本会检查URL 子域是否与我的站点相同，如果不是，它将添加onclick=return confirm('You will now be redirected to an exteral site') 和target="_blank" 到链接HTML。

Answer 1

正如您已经说过的，这可以通过使用confirm onclick 来实现，您可以轻松地将 EventListener 添加到页面中所有外部 (l.hostname !== location.hostname) 的 a 元素中，并且仅在用户接受后重定向消息，就像这样：

Array.from(document.querySelectorAll("a")).filter(l => l.hostname !== location.hostname).forEach(el => el.addEventListener("click", evtL));

function evtL(e) {
    if (confirm("Are you sure you want to leave the page?")) {
      return; //redirect
    } else {
      e.preventDefault();
      return false; //don't redirect
    }
}

<a href="/foo/bar">internal</a>
<a href="https://example.com">external</a>

<a href="https://stacksnippets.net/js">also internal</a>

Answer 2

1. 可以通过正则匹配来实现。
2. 可以在document对象上添加单个事件侦听器，而不是添加多个事件侦听器，并如下检测外部链接。这将提高效率。

供参考，Handling events for multiple elements in a single listener

var regexp = /https?:\/\/(www.){0,1}((?:[\w\d-]+\.)+[\w\d]{2,})/i;
function isExternal(url)
{
    return regexp.exec(location.href)[2] !== regexp.exec(url)[2];
}

document.addEventListener("click",function(){
    if(event.target.tagName.toLowerCase()==="a")
    {
        if(isExternal(event.target.href))
        {
            if(confirm("Redirecting to an external site...."))
            {
                console.log("Going to external site...");
                return;
            }
            else
            {
                event.preventDefault();
                return;
            }
        }
        else
        {
            console.log("Internal URL Clicked.")
        }
    }
});

<a href="https://www.google.com" target="_blank">External Site 1</a> - https://www.google.com<br>
<a href="https://www.stackoverflow.com" target="_blank">External Site 2</a> - https://www.stackoverflow.com<br>
<a href="http://www.facebook.com" target="_blank">External Site 3</a> - http://www.facebook.com (Using HTTP)<br>
<a href="http://www.stacksnippets.net" target="_blank">Internal Site (Using HTTP)</a> - http://www.stacksnippets.net<br>
<a href="http://stacksnippets.net" target="_blank">Internal Site (without www.)</a> - http://stacksnippets.net<br>
<a href="/path/to/something" target="_blank">Internal reference</a> - /path/to/something (Internal reference)<br>

感谢@pseudosavant 提供regex。

虽然@Luca 的回答有效，但 IE、Safari 和 Opera 不支持 hostname。 Browser Compatibility供参考。

Answer 3

由于您使用的是 Angular.js，我建议您看看它们如何与 <a> 一起工作，因为它们已经有一个指令应用于所有 <a> 以使 ngHref 工作.来源在这里：<a> directive。

基本思想是将用于将href 更改为警告或显示模式或其他任何内容的逻辑放在element.on('click', function(event) {...}) 中。

由于 Angular.js 已经定义了一个 <a> 指令，您可能需要摆弄指令的 priority，以免意外破坏 Angular 摆弄 @987654331 的方式@。

指令看起来像这样：

// Logic that dictactes whether the URL should show a warning
function isSuspectUrl(l) {
    return false;
}

const app = angular
    .module("aWarn", [])
    .directive("a", function() {
        return {
            restrict: "E",
            compile: function(el, attr) {
                element.on("click", function(e) {
                    if (isSuspectUrl(attr.href)) {
                        // Logic that would display a warning
                    }
                });
            }
        }
    });

Answer 4

2021 版

• es2015+
• 与 SPA 配合使用
• 处理看似外部的本地链接
• 子域支持

const baseUrl = window.location.origin;
const absoluteUrlRegex = new RegExp('^(?:[a-z]+:)?//', 'i');

const isAbsoluteUrl = (url) => absoluteUrlRegex.test(url);
const isLocalUrl = (url) => url.startsWith(baseUrl) || !isAbsoluteUrl(url);

// https://gist.github.com/ -> github.com
// https://stackoverflow.com/ -> stackoverflow.com
const getDomain = (url) => {
    const urlInstance = new URL(url);
    const dividedUrl = urlInstance.hostname.split('.');
    const urlDomainsCount = dividedUrl.length;
    return urlDomainsCount === 2
        ? urlInstance.hostname
        : `${dividedUrl[urlDomainsCount - 2]}.${dividedUrl[urlDomainsCount - 1]}`;
};

// example whitelist
const whitelist = [
    'twitter.com',
    'github.com',
];

// url has same domain or whitelisted
const isWhitelistedUrl = (url) => {
    const domain = getDomain(url);
    return domain === window.location.hostname || whitelist.includes(domain);
};

// bind listener
const confirmExternalLinks = (confirmationFn) => {
    document.addEventListener('click', async (e) => {
        const linkElement = e.target.closest('a');
        if (!linkElement) return;
        const link = linkElement.getAttribute('href');
        if (isLocalUrl(link) || isWhitelistedUrl(link)) return;
        e.preventDefault();
        const confirmation = await confirmationFn(link);
        if (confirmation) window.open(link);
    });
};

// tip: replace confirmationFn with your custom handler which returns Promise
confirmExternalLinks((link) => confirm(`Proceed to ${link}?`));

<a target="_blank" href="https://stacksnippets.net/">https://stacksnippets.net/</a>  is local for this snippet iframe
<br>
<a target="_blank" href="https://twitter.com/">https://twitter.com/</a> is whitelisted
<br>
<a target="_blank" href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>  is external