Πώς γίνεται η ανταλλαγή δεδομένων μεταξύ iframe και…

Υπάρχουν διάφοροι τρόποι ανταλλαγής δεδομένων:

PostMessage API:

Ο βασικός και ασφαλής τρόπος.
Επιτρέπει την αποστολή μηνυμάτων μεταξύ παραθύρων (iframe/γονικό, διαφορετικά παράθυρα/καρτέλες) από διαφορετικούς τομείς.
Είναι σημαντικό να καθορίζεται το αναμενόμενο origin για την αποτροπή επιθέσεων XSS.

// Αποστολή από το γονικό παράθυρο στο iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.postMessage('Γειά από τον γονέα!', 'https://trusted-domain.com');

// Λήψη στο iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') {
        return; // Ελέγχει τον αποστολέα
    }
    console.log('Λήφθηκε μήνυμα στο iframe:', event.data);
});

// Αποστολή από το iframe στο γονικό παράθυρο
window.parent.postMessage('Γειά από το iframe!', 'https://parent-domain.com');

// Λήψη στο γονικό παράθυρο
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://iframe-domain.com') {
        return; // Ελέγχει τον αποστολέα
    }
    console.log('Λήφθηκε μήνυμα στον γονέα:', event.data);
});

Πρόσβαση στο αντικείμενο window (μόνο για Same-Origin):

Αν το iframe και η σελίδα γονέα βρίσκονται στον ίδιο τομέα (Same-Origin Policy), μπορούν να έχουν άμεση πρόσβαση στα αντικείμενα window το ένα του άλλου.

// Στο γονικό παράθυρο
const iframeEl = document.getElementById('my-iframe');
const iframeWindow = iframeEl.contentWindow;
iframeWindow.someVariable = 'Τιμή από τον γονέα';
iframeWindow.someFunction();

// Στο iframe
const parentWindow = window.parent;
console.log(parentWindow.someVariable);
parentWindow.someOtherFunction();

URL hash (#):

Απλός, αλλά περιορισμένος τρόπος.
Μπορεί να μεταφέρει μικρά δεδομένα, αλλάζοντας το hash στο URL του iframe.
Οι αλλαγές στο hash δεν ανανεώνουν τη σελίδα.
Απαιτεί παρακολούθηση αλλαγής του hash (π.χ. μέσω του γεγονότος hashchange).

// Στο γονικό παράθυρο, για αλλαγή του hash του iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.location.hash = 'data=some_value';

// Στο iframe, για ανάγνωση του hash
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    console.log('Το hash άλλαξε:', hash);
    // Ανάλυση δεδομένων από το hash
});

Αλλαγή location.href (λιγότερο προτιμόμενο):
- Μεταφορά δεδομένων μέσω αλλαγής του URL του iframe και επαναφόρτωσης.
- Δεν είναι κατάλληλο για συχνή ανταλλαγή.
Κοινόχρηστα αποθηκευτικά μέσα (Same-Origin):
- localStorage και sessionStorage.
- Αν το iframe και η σελίδα γονέα βρίσκονται στον ίδιο τομέα, μπορούν να χρησιμοποιούν τα ίδια αποθηκευτικά μέσα.
```
// Στο γονικό παράθυρο
localStorage.setItem('sharedData', JSON.stringify({ value: 'Παράδειγμα' }));

// Στο iframe
const data = JSON.parse(localStorage.getItem('sharedData'));
console.log('Δεδομένα από το localStorage:', data);
```

Η επιλογή της μεθόδου εξαρτάται από την πολιτική ασφαλείας (Same-Origin Policy) και τον όγκο/τύπο των δεδομένων που μεταφέρονται. Το PostMessage είναι η πιο ευέλικτη και ασφαλής λύση για διασταυρούμενη ανταλλαγή δεδομένων.

Πώς γίνεται η ανταλλαγή δεδομένων μεταξύ iframe και κύριας σελίδας;