Η ετικέτα iframe

Η ετικέτα iframe επιτρέπει την ενσωμάτωση του περιεχομένου μιας ιστοσελίδας σε μια άλλη. Χρησιμοποιείται για την εμφάνιση περιεχομένου, όπως βίντεο, εικόνες ή άρθρα, χωρίς την ανάγκη να ανοίξει νέο παράθυρο ή καρτέλα.

Το περιεχόμενο της ιστοσελίδας που ενσωματώνεται θα έχει το σχεδιασμό ακριβώς αυτής της ιστοσελίδας. Εν τω μεταξύ, τα CSS στυλ της δικής μας ιστοσελίδας, καθώς και ο JavaScript κώδικάς μας δεν θα επηρεάζουν το περιεχόμενο της ετικέτας iframe.

Στο περιεχόμενο του iframe μπορεί να εφαρμοστεί ο δικός μας JavaScript, αλλά για αυτό πρέπει να ενεργήσουμε με ειδικές μεθόδους.

Η ετικέτα iframe χρησιμοποιείται ευρέως σε ιστοσελίδες για την ενσωμάτωση βίντεο από το YouTube και άλλες πλατφόρμες, καθώς και για την εμφάνιση άρθρων και εικόνων από άλλες πηγές.

Ιδιότητες

Ιδιότητα	Περιγραφή
`src`	Καθορίζει τη διεύθυνση της σελίδας που πρέπει να ενσωματωθεί.
`srcdoc`	Επιτρέπει τον ορισμό του περιεχομένου του iframe απευθείας στην ιδιότητα.
`frameborder`	Ορίζει το πλαίσιο γύρω από το iframe. Η τιμή `yes` ορίζει πλαίσιο (από προεπιλογή), ενώ η τιμή `no` αφαιρεί το πλαίσιο.
`scrolling`	Ορίζει τις γραμμές κύλισης μέσα στο iframe. Η τιμή `auto` - κύλιση κατά ανάγκη (από προεπιλογή), η τιμή `yes` - κύλιση πάντα, η τιμή `no` - χωρίς κύλιση.

Παράδειγμα

Ας εισάγουμε στην ιστοσελίδα μας ένα iframe με άλλη ιστοσελίδα (για παράδειγμα ας πάρουμε το ):

html<iframe src="/" width="600" height="400"></iframe>

Результат:

Παράδειγμα

Ας εισάγουμε στην ιστοσελίδα μας ένα βίντεο από το YouTube:

html<iframe
  src="https://www.youtube.com/embed/KzQrHpB1H8U"
  allowfullscreen
  width="400"
  height="400">
</iframe>

Результат:

Παράδειγμα

Ας γράψουμε το περιεχόμενο απευθείας στο iframe:

html<iframe
  srcdoc="<h1>head</h1><p>text</p>"
  width="300"
  height="200">
</iframe>

Результат: