Wie es der Zufall so will habe ich einen Kunden der genau so etwas wollte.
Beim Klick auf einen externen Link einen kleinen Dialog einblenden.
Wer also mal so etwas benötigt darf sich gerne hier bedienen:
HTML-Code:
<script>
(function(){
const links = document.querySelectorAll('a[target="_blank"]');
if( !links ) {
return;
}
links.forEach((link)=>{
link.addEventListener('click',function(e){
const currUrl = new URL(document.location.href);
const linkUrl = new URL(this.href);
let title = linkUrl.host;
if( currUrl.host == linkUrl.host ) {
return;
}
e.preventDefault();
if( this.title ) {
title = this.title;
}
let oldOverlay;
if( oldOverlay = document.getElementById('externalLinkModal') ) {
oldOverlay.remove();
}
this.overlay = document.createElement('DIV');
this.overlay.id = 'externalLinkModal';
this.overlay.innerHTML = `
<div>
<div class="head">Sie werden auf eine externe Seite weitergeleitet.</div>
<div class="description">Mit Ihrer Zustimmung werden Sie zu <span>${title}</span> weitergeleitet, das gänzlich eigenverantwortlich Ihre Daten bearbeitet. Wenn Sie keine Verarbeitung Ihrer Daten durch ${title} wünschen, klicken Sie bitte auf abrechen, um eine Weiterleitung zu verhindern.</div>
<div class="buttons">
<button class="cancel">Abbrechen</button>
<button class="confirm">Weiter zu ${title}</button>
</div>
</div>
`;
this.overlay.querySelector('button.cancel').addEventListener('click',(e)=>{
this.overlay.remove();
});
this.overlay.querySelector('button.confirm').addEventListener('click',(e)=>{
window.open(this.href);
this.overlay.remove();
});
document.body.appendChild(this.overlay);
});
});
})();
</script>
Zur Verwendung:
Externe Links müssen immer mit target="_blank" angegeben werden damit das Skript anspringt.
Im Dialog wird dann entweder die Domain des Ziels angezeigt oder, falls vorhanden, der Inhalt des title-Attributs des Ankers.