Ich muss wissen, ob Benutzer auf einen internen oder externen Link geklickt haben, um sie zu benachrichtigen.
Ich habe viele interne und externe Links auf meiner Website.

Meine internen Links lauten wie folgt:

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

Ich muss nur benachrichtigen, wenn auf externe Links geklickt wird.

1
user2511140 8 Dez. 2013 im 18:24

4 Antworten

Beste Antwort

(Ich habe hier zwei Methoden eingefügt: Eine Methode verwendet jQuery und die andere nicht jQuery. Fahren Sie mit der fett gedruckten Überschrift fort, wenn Sie jQuery nicht verwenden möchten.)

Eine Möglichkeit, dies zu tun, besteht darin, jedem externen Link eine Klasse hinzuzufügen und dann einen Ereignishandler an alle Elemente in dieser Klasse anzuhängen, der beim Klicken auf den Link eine Warnung auslöst. Dies ist jedoch mühsam, da Sie die Klasse zu jedem externen Link hinzufügen müssen und dies nicht für benutzergenerierte Inhalte gilt.

Sie können jQuery zusammen mit dem CSS-Selektor a[href^="http"] verwenden, um alle externen Links auszuwählen, und dann einen Ereignishandler anhängen, der Ihre Warnung auslöst, wenn auf sie geklickt wird:

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

a[href^="http"] bedeutet "ein a -Tag mit einem Link, und dieser Link muss mit 'http' beginnen." Hier wählen wir also alle Elemente aus, die mit http beginnen - dh jeden externen Link - und stellen ihn dann so ein, dass beim Klicken eine Warnung angezeigt wird.

Nicht-jQuery-Methode

Wenn Sie dies ohne jQuery tun möchten, möchten Sie document.querySelectorAll('a[href^="http"]') verwenden und das Klickereignis jedes Elements in dem Array binden, das diese Funktion zurückgibt. Das sieht ungefähr so aus:

var externalLinks = document.querySelectorAll('a[href^="http"]');
for (var i = externalLinks.length-1; i >= 0; i--) {
    externalLinks[i].addEventListener("click", function() { alert(); }, false);
}
3
Matthew 8 Dez. 2013 im 14:41
$(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;
    });
 });`
0
digitalextremist 8 Dez. 2013 im 15:10

Ich musste dies auf meiner eigenen Website von Grund auf neu machen, also kopiere ich es einfach hier und füge es für Sie ein. Es kam aus einem meiner Objekte. Wenn ich also einige this Schlüsselwörter hinterlassen habe, können Sie sie entfernen.

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));
};

Ersetzen Sie Instanzen von 'fleeceitout' durch den Domainnamen Ihrer Site (microsoft.com usw.) und Sie sind fertig.

1
Deryck 8 Dez. 2013 im 14:40

Am einfachsten ist es, mit jQuery eine spezielle Klasse für externe Links zu verwenden oder in der URL nach "http: //" zu suchen.

So, wenn Sie eine spezielle Klasse verwenden:

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

Und dann in HTML:

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

Oder Sie können in der URL nach http:// suchen! Dann brauchen Sie keine spezielle Klasse.

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

Zitieren: Meine ursprüngliche Testmethode für "http: //" war etwas langsamer und führte tatsächlich einen indexOf -Test für .attr("href") durch, sodass ich stattdessen die Auswahl von @ Matthew auswählte. Die Caret-Route vergessen! Props an @Matthew dazu und für die Nicht-jQuery-Alternative.

0
digitalextremist 8 Dez. 2013 im 14:55