Question

我需要知道用户是否点击了内部或外部链接来提醒他们我的网站上有很多内部和外部链接。

我的内部链接是这样的：

<a href="about.php">about</a>
<a href="tools/draw.php">draw graph</a>

我只需要在点击外部链接时发出警报。

Answer 1

（我在这里包含了两种方法：一种方法使用jQuery，另一种方法不使用jQuery。如果你不想使用jQuery，请跳到粗体标题）

您可以这样做的一种方法是向每个外部链接添加一个类，然后将事件处理程序附加到该类中的所有内容，以便在单击该链接时发出警报。但是，这很乏味，因为您必须将类添加到每个外部链接，而不是用户生成的内容。

你可以做的是使用jQuery和CSS选择器a[href^="http"]来选择所有外部链接，然后附加一个事件处理程序，在点击它们时引发警报：

$('a[href^="http"]').click(function() {
    alert();
});

a[href^="http"]表示“a标记，其中包含链接，该链接必须以”http“开头。”所以在这里我们选择以http开头的所有元素 - 即每个外部链接 - 然后设置它，以便当您点击它们时，会弹出一个警告。

非jQuery方法

如果你想在没有jQuery的情况下这样做，你将需要使用document.querySelectorAll('a[href^="http"]')并绑定该函数返回的数组中每个元素的click事件。看起来像这样：

var externalLinks = document.querySelectorAll('a[href^="http"]');
for (var i = externalLinks.length-1; i >= 0; i--) {
    externalLinks[i].addEventListener("click", function() { alert(); }, false);
}

Answer 2

我必须在我自己的网站上从头开始这样做，所以我只是复制+粘贴在这里。它来自我的一个对象，所以如果我留下一些this个关键字，你可以删除它们。

function leaving() {
    var links = document.anchors || document.links || document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if ((links[i].getAttribute('href').indexOf('http') === 0 && links[i].getAttribute('href').indexOf('fleeceitout') < 0) && (links[i].getAttribute('href').indexOf('/') !== 0 && links[i].getAttribute('href').indexOf('#') !== 0) && links[i].className.indexOf('colorbox') < 0) {
            addEvent(links[i], 'click', this.action);
        }
    }
}

function action(evt) {
    var e = evt || window.event,
        link = (e.currentTarget) ? e.currentTarget : e.srcElement;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        window.location.href = link.href;
        return;
    }
    var leave = confirm("You are now leaving the _______ website.  If you want to stay, click cancel.");
    if (leave) {
        window.location.href = link.href;
        return;
    } else {
        return leave;
    }
}
var addEvent = function (element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};

将“fleeceitout”的实例替换为您的网站域名（microsoft.com等），然后进行设置。

Answer 3

最简单的方法是使用jQuery，使用特殊的外部链接类，或者通过检查URL中的“http：//”。

像这样，如果使用特殊类：

$("a.external").on("click", function() {
    //de Do something special here, before going to the link.
    //de URL is: $(this).attr("href")
});

然后在HTML中：

<a href="http://external.link" class='external'>external link</a>

或者，您可以在网址中查看http://！那你就不需要特殊的课了。

$('a[href=^"http://"]').on("click", function() {
    //de Do something special here, before going to the link.
    //de URL is: $(this).attr("href")
});

引用：我测试“http：//”的原始方法有点慢，实际上对indexOf进行了.attr("href")测试，所以我使用了@ Matthew的选择器而是选择。忘了插入路线！关于@Matthew的道具，以及非jQuery替代品。

Answer 4

$(document).ready(function() {
    $('a').click(function() {
        var returnType= true;
        var link = $(this).attr('href');
        if ( link.indexOf('http') >= 0 ) { 
            returnType=confirm('You are browsing to an external link.');
        }
        return returnType;
    });
 });`

如何检测单击内部或外部链接的用户

4 个答案: