Τι είναι ένα iframe;

Ένα <iframe> (inline frame) είναι ένα στοιχείο HTML που ενσωματώνει μια άλλη ιστοσελίδα ή έγγραφο μέσα στην τρέχουσα σελίδα. Δημιουργεί ένα ξεχωριστό περιβάλλον περιήγησης σε μια ορθογώνια περιοχή της σελίδας, επιτρέποντας την εμφάνιση περιεχομένου από διαφορετικό URL — όπως χάρτης, βίντεο ή widget τρίτου κατασκευαστή — χωρίς ο χρήστης να πρέπει να φύγει από την τρέχουσα σελίδα.

Τα iframes χρησιμοποιούνται συνήθως για την ενσωμάτωση βίντεο YouTube, Google Maps, φορμών πληρωμής, widget κοινωνικών μέσων και διαφημιστικών πανό. Επειδή το ενσωματωμένο περιεχόμενο εκτελείται στο δικό του περιβάλλον, χαρακτηριστικά όπως sandbox και allow επιτρέπουν στους προγραμματιστές να ελέγχουν αυστηρά τι επιτρέπεται να κάνει η ενσωματωμένη σελίδα.

Περιγραφή εργαλείου

Αυτό το εργαλείο δημιουργεί έτοιμο κώδικα HTML <iframe> για αντιγραφή από μια απλή φόρμα. Διαμορφώστε το URL προέλευσης, τις διαστάσεις, τη συμπεριφορά κύλισης, τη στρατηγική φόρτωσης, τα δικαιώματα και τους περιορισμούς sandbox, και το εργαλείο εξάγει αμέσως την αντίστοιχη ετικέτα. Δεν απαιτείται χειροκίνητη γραφή χαρακτηριστικών ή απομνημόνευση της σύνταξης των σημαιών sandbox.

Παραδείγματα

Ελάχιστο iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe με καθυστερημένη φόρτωση και sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe με δικαιώματα κάμερας και μικροφώνου:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Χαρακτηριστικά

  • Δημιουργεί έγκυρο κώδικα <iframe> από μια οπτική φόρμα — δεν απαιτείται γνώση HTML
  • Πλήρης έλεγχος των δικαιωμάτων (allow) και περιορισμών sandbox
  • Ενημερώσεις ζωντανής προεπισκόπησης καθώς αλλάζετε οποιαδήποτε επιλογή

Επεξήγηση επιλογών

Επιλογή Περιγραφή
URL Το χαρακτηριστικό src — η διεύθυνση της σελίδας προς ενσωμάτωση
Πλάτος / Ύψος Διαστάσεις σε pixel του iframe
Τίτλος Προσβάσιμη ετικέτα (χαρακτηριστικό title) για αναγνώστες οθόνης
Όνομα Το χαρακτηριστικό name, που χρησιμοποιείται ως στόχος συνδέσμου
Κύλιση Ελέγχει τη γραμμή κύλισης: αυτόματη, πάντα ενεργή ή πάντα απενεργοποιημένη
Φόρτωση eager φορτώνει αμέσως· lazy αναβάλλει μέχρι κοντά στο viewport
Επιτρέπει πλήρη οθόνη Προσθέτει allowfullscreen ώστε το ενσωματωμένο περιεχόμενο να μπορεί να γίνει πλήρη οθόνη
Περίγραμμα Όταν δεν είναι επιλεγμένο, προσθέτει style="border: none;" για αφαίρεση του προεπιλεγμένου περιγράμματος
Επιτρέπει χαρακτηριστικά Χορηγεί συγκεκριμένα δικαιώματα API του προγράμματος περιήγησης στη σελίδα που ενσωματώνεται
Σημαίες sandbox Περιορίζει τι μπορεί να κάνει η ενσωματωμένη σελίδα· κάθε σημαία επανενεργοποιεί μια συγκεκριμένη δυνατότητα

Συμβουλές

  • Παρέχετε πάντα ένα χαρακτηριστικό title για προσβασιμότητα — οι αναγνώστες οθόνης το ανακοινώνουν κατά την εστίαση στο iframe.
  • Χρησιμοποιήστε loading="lazy" για iframes κάτω από το fold για βελτίωση της απόδοσης φόρτωσης σελίδας.
  • Η προσθήκη του χαρακτηριστικού sandbox χωρίς σημαίες κλειδώνει το περιεχόμενο εντελώς· προσθέστε μόνο τις σημαίες που χρειάζεστε πραγματικά.