Exit Disclaimer mit jQuery

Anzeigen eines Hinweises, dass der Benutzer die Webseite verlässt, nach dem Klick auf eine externe URL. Erst nach Bestätigung des Benutzers wird die externe Seite geöffnet. Es können Domains angegeben werden, bei denen die Hinweisbox nicht erscheint (z.B. bei Domains, die zur Unternehmensgruppe oder dem gleichen Inhaber gehören), außerdem wird das „target“ des Links (öffnen in neuer bzw. gleicher Seite) beachtet.

HTML

<div id="hint_external">
    <h2>Externer Link</h2>
    <p>
        Sie haben einen externen Link gewählt. Wenn Sie auf "Ja" klicken, verlassen Sie unsere Homepage.<br />
        Bitte beachten Sie, dass wir für den Inhalt der verlinkten Seite nicht verantwortlich sind.
    </p>
    <p>
        Wollen Sie die externe Seite <b id="hint_external_url">URL</b> betreten?
    </p>
    <p>
        <a id="hint_external_yes" href="#">Ja</a> <a id="hint_external_close" href="#">Nein</a>
    </p>
</div>

CSS

#hint_external {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    background: #fff;
    border: 2px solid #000;
    padding: 10px;
}

JavaScript

// Hint for opening external url
var whiteList = new Array('www.domain.de', 'www.domain.com', '.allow-all-subdomains.de');
$('a').not('#hint_external a').on('click', function(e){
    var href = $(this).attr('href');
    var target = $(this).attr('target');
    if(href.match(/((http:\/\/)|(https:\/\/))/i)) {
        var whitelisted = false;
        // Check for external url
        var a = document.createElement('a');
        a.href = href;
        var hostname = a.hostname;
        $.each(whiteList, function(index, name) {
            name = name.replace(/\./g, String.fromCharCode(92) + '.');
            var re = new RegExp(name, 'i');
            if(re.test(hostname)) {
                whitelisted = true;
            }
        });
        if(!whitelisted) {
            e.preventDefault();
            $('#hint_external_url').text(hostname);
            $('#hint_external').show();
            $('#hint_external_close').one('click', function(e2){
                e2.preventDefault();
                $('#hint_external').hide();
            });
            $('#hint_external_yes').one('click', function(){
                $(this).attr('href', href);
                if(target){
                    $(this).attr('target', target);
                } else{
                    $(this).removeAttr('target');
                }
                $('#hint_external').hide();
            });
        }
    }
});

Schreibe einen Kommentar