Kommunikation zwischen Iframe und Parent: Sweet Alerts im Parent Frame aufrufen

Funktionen im Parent aufrufen, aus einem Iframe, am Bespiel von SweetAlerts.

Mit der SweetAlert Bibliothek lassen sich einfach schicke Dialoge in Java-Script realisieren. Die Darstellung kommt innerhalb von langen Iframes aber an ihre Grenzen und liefert einige unschöne Effekte.

So bezieht sich die Position normalerweise auf den aktuellen Bildschirm und der Dialog wird beispielsweise zentriert angezeigt. Im Iframe kann dies aber bedeuten, dass dies außerhalb des unsichtbaren Bereichs dargestellt werden. Auch unschöne automatische Scrolling-Effekte treten auf.

Meine Idee war daher, die Benachrichtigung in der übergeordneten Seite darzustellen.

Doch wie rufen wir eine Funktion aus dem Iframe in der übergeordneten Seite auf? Hier kommt die Funktion “postMessage” ins Spiel. Dieser erlaubt uns eine Nachricht aus dem Iframe heraus zu senden.

Hier unser Beispiel:

<script>
    function dialogFrame(title, message) {
        parent.postMessage({ id: 'openAlert', title: title, message: message}, "*");
    }
</script>

Als Parameter können wir einen String oder auch komplexe Objekte übergeben. In unserem Beispiel übergeben wir eine ID, den Titel des Dialogs und einen Text.

In der HTML-Datei, welche unseren Iframe enthält, müssen wir nun noch die Nachricht registrieren:

window.addEventListener("message", function(event) {
    if(event.data.id === "openAlert");{
        openAlert(event.data.title, event.data.message);
    }
});

Hier lesen wir die ID aus und rufen die “openAlert” Funktion auf, welche unseren Titel und Nachricht übergeben bekommt.

Diese Funktion öffnet anschließend den SweetAlert im übergeordneten Fenster. Durch die Parameter können wir damit den Titel und auch den Text der Benachrichtigung steuern.

function openAlert(title, message) {
    Swal.fire({
        title: title,
        text: message,
        position: 'middle',
        confirmButtonText: 'OK',
    });
}

Das Beispiel gibt es hier zum Download

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert