Как сделать так, чтобы все внешние ссылки на моем сайте вызывали подтверждение

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

Поскольку вы используете Angular.js, я бы рекомендовал взглянуть на то, как они работают с <a>, поскольку у них уже есть директива, применяемая ко всем <a>, чтобы заставить ngHref работать.Источник мог бы быть здесь: <a> директива .

Основная идея состоит в том, чтобы поместить логику, которую вы используете для изменения href, в предупреждение или отобразить модальное или что-либо еще вelement.on('click', function(event) {...}).

Поскольку Angular.js уже определил директиву <a>, вам может понадобится поиграться с priority вашей директивы, чтобыВы не случайно нарушаете путь Angular Fiddles с помощью <a>.

Директива будет выглядеть примерно так:

// 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 2

1. Это может быть достигнуто путем сопоставления регулярному выражению.
2. Вместо добавления нескольких прослушивателей событий можно добавить одиночный прослушиватель событий для объекта document и обнаруживать внешние ссылки следующим образом.Это даст большую эффективность.

Для справки: Обработка событий для нескольких элементов в одном слушателе

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 за регулярное выражение .

Хотя ответ @ Luca работает, hostname не поддерживаетсяв IE, Safari и Opera. Совместимость браузера для справки.

Answer 3

Как вы уже сказали, это может быть достигнуто с помощью confirm onclick, вы можете легко добавить EventListener ко всем a элементам, которые являются внешними (l.hostname !== location.hostname) на вашей странице и перенаправляют только после того, как пользователь принимаетсообщение, вот так:

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>