Πώς χρησιμοποιήσατε το στοιχείο iframe στα έργα σας…

Έχω χρησιμοποιήσει <iframe> για:

Εμφάνιση περιεχομένου από άλλους τομείς: Ενσωμάτωση εξωτερικών widget (χάρτες, players βίντεο), διαφημιστικά μπλοκ, ενσωματώσεις με υπηρεσίες.
Δημιουργία απομονωμένων περιβαλλόντων: Εκτέλεση εξωτερικού κώδικα JavaScript ή στυλ χωρίς κίνδυνο να επηρεάσει την κύρια σελίδα. Για παράδειγμα, για sandbox κατά την προβολή περιεχομένου χρήστη ή την εκκίνηση επεξεργαστών κώδικα.
Διαμεσολάβηση μεταξύ τομέων: Μεταφορά δεδομένων μεταξύ της γονικής σελίδας και του περιεχομένου του <iframe> χρησιμοποιώντας window.postMessage.
Ενσωμάτωση στατικών HTML σελίδων: Εμφάνιση μέρους μιας ιστοσελίδας ή εγγράφου χωρίς πλήρη πλοήγηση.

Παράδειγμα χρήσης με window.postMessage:

Γονική σελίδα:

// Αποστολή μηνύματος στο iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('γεια από τον γονέα', 'https://trusted-domain.com');

// Λήψη μηνύματος από το iframe
window.addEventListener('message', (event) => {
  // Έλεγχος πηγής μηνύματος για ασφάλεια
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Μήνυμα από το iframe:', event.data);
  }
});

Σελίδα μέσα στο iframe:

// Λήψη μηνύματος από τη γονική σελίδα
window.addEventListener('message', (event) => {
  // Έλεγχος πηγής μηνύματος για ασφάλεια
  if (event.origin === 'https://parent-domain.com') {
    console.log('Μήνυμα από τον γονέα:', event.data);

    // Αποστολή απάντησης στη γονική σελίδα
    event.source.postMessage('γεια από το iframe', event.origin);
  }
});

Παράδειγμα ενσωμάτωσης βίντεο:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Κατά την εργασία με <iframe>, είναι πάντα σημαντικό να δίνεται προσοχή στην ασφάλεια, ειδικά στο attribute sandbox και στον έλεγχο του event.origin κατά τη χρήση του window.postMessage. Επίσης, θα πρέπει να λαμβάνονται υπόψη και οι παράγοντες SEO, καθώς το περιεχόμενο του <iframe> ευρετηριάζεται από τις μηχανές αναζήτησης.

Πώς χρησιμοποιήσατε το στοιχείο iframe στα έργα σας;