Weiterleitung mit Info

Hallo,
ich habe derzeit ein Projekt, in dem desöfteren auf eine externe Seite (Spielergebnisseite)
weitergeleitet werden muss. Die Spielergebnisseite sieht vom Layout ähnlich aus, das ist daher verwirrend.

Ich suche eine Lösung, dass der User auf einer regulären Seite vorher darüber informiert wird, dass er jetzt auf eine externe
Seite kommt (Sie werden in 5 Sekunden auf eine externe Seite weitergeleitet).
Ich habe das auch schon als Lightbox-Lösung gesehen.

Vielleicht hat ja jemand einen Tipp für mich.

Vielen Dank im Vorraus

Frank

Das ist mit ein bisschen JavaScript ruckzuck erledigt. Es kommt eben darauf an wie man es genau ausgestalten möchte.
Die "einfachste" Variante wäre so etwas wie hier https://stackoverflow.com/a/50763042

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.

Zitat:

---

Zitat von BennyBorn

Externe Links müssen immer mit target="_blank" angegeben werden damit das Skript anspringt.

---

ich habe auch sowas ähnliches - hier ist der Trigger eine bestimmte CSS-Klasse

Zitat:

---

Zitat von zonky

ich habe auch sowas ähnliches - hier ist der Trigger eine bestimmte CSS-Klasse

---

Kann man natürlich auch problemlos darauf anpassen.
Ich finde es für die Kunden immer einfacher wenn sie nur eine Checkbox anhaken oder die Option "Neues Fenster" auswählen müssen :)

ja, kommt auf die Ansprüche der Redakteure an... wenn die das einstellbar haben wollen...