Wie erfolgt der Datenaustausch zwischen iframe und…

Es gibt mehrere Möglichkeiten, Daten auszutauschen:

PostMessage API:

Haupt- und sichere Methode.
Ermöglicht das Senden von Nachrichten zwischen Fenstern (iframe/Elternfenster, verschiedene Fenster/Tabs) aus unterschiedlichen Domains.
Es ist wichtig, den erwarteten origin anzugeben, um XSS-Angriffe zu verhindern.

// Vom Elternfenster zum iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.postMessage('Hallo vom Elternteil!', 'https://trusted-domain.com');

// Im iframe empfangen
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') {
        return; // Überprüfen des Absenders
    }
    console.log('Nachricht im iframe empfangen:', event.data);
});

// Vom iframe zum Elternfenster senden
window.parent.postMessage('Hallo vom iframe!', 'https://parent-domain.com');

// Im Elternfenster empfangen
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://iframe-domain.com') {
        return; // Überprüfen des Absenders
    }
    console.log('Nachricht im Elternfenster empfangen:', event.data);
});

Zugriff auf das window-Objekt (nur für Same-Origin):

Wenn iframe und Elternseite auf derselben Domain sind (Same-Origin-Policy), können sie direkt auf die window-Objekte des anderen zugreifen.

// Im Elternfenster
const iframeEl = document.getElementById('my-iframe');
const iframeWindow = iframeEl.contentWindow;
iframeWindow.someVariable = 'Wert vom Elternteil';
iframeWindow.someFunction();

// Im iframe
const parentWindow = window.parent;
console.log(parentWindow.someVariable);
parentWindow.someOtherFunction();

URL-Hash (#):

Einfach, aber begrenzt.
Kleine Daten können durch Ändern des Hash in der URL des iframes übertragen werden.
Hash-Änderungen laden die Seite nicht neu.
Es ist notwendig, Hash-Änderungen zu überwachen (z.B. durch das hashchange-Event).

// Im Elternfenster, um den Hash des iframes zu ändern
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.location.hash = 'data=some_value';

// Im iframe, um den Hash zu lesen
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    console.log('Hash hat sich geändert:', hash);
    // Daten aus dem Hash parsen
});

Ändern von location.href (weniger bevorzugt):
- Daten durch Ändern der URL des iframes und anschließendes Neuladen übertragen.
- Nicht geeignet für häufigen Austausch.

Gemeinsame Speicher (Same-Origin):

localStorage und sessionStorage.
Wenn iframe und Elternseite auf derselben Domain sind, können sie dieselben Speicher verwenden.

// Im Elternfenster
localStorage.setItem('sharedData', JSON.stringify({ value: 'Beispiel' }));

// Im iframe
const data = JSON.parse(localStorage.getItem('sharedData'));
console.log('Daten aus localStorage:', data);

Die Wahl der Methode hängt von der Sicherheitsrichtlinie (Same-Origin-Policy) und vom Volumen/Typ der übertragenen Daten ab. PostMessage ist die flexibelste und sicherste Lösung für domänenübergreifenden Austausch.

Wie erfolgt der Datenaustausch zwischen iframe und der Hauptseite?