Ticket sichern für VueJS-Konferenz 2022
Ergebnis 1 bis 6 von 6

Thema: Weiterleitung mit Info

  1. #1
    Contao-Nutzer Avatar von Frankkirsch
    Registriert seit
    27.01.2010.
    Ort
    Michelstadt/Odenwald
    Beiträge
    186
    Partner-ID
    11272

    Standard 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

  2. #2
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    188
    Partner-ID
    6916

    Standard

    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

  3. #3
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    188
    Partner-ID
    6916

    Standard

    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.

  4. #4
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    8.717
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von BennyBorn Beitrag anzeigen
    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

  5. #5
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    188
    Partner-ID
    6916

    Standard

    Zitat Zitat von zonky Beitrag anzeigen
    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

  6. #6
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    8.717
    User beschenken
    Wunschliste

    Standard

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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •