Η ετικέτα iframe
Η ετικέτα iframe επιτρέπει την ενσωμάτωση του περιεχομένου μιας ιστοσελίδας σε μια άλλη. Χρησιμοποιείται για την εμφάνιση περιεχομένου, όπως βίντεο, εικόνες ή άρθρα, χωρίς την ανάγκη να ανοίξει νέο παράθυρο ή καρτέλα.
Το περιεχόμενο της ιστοσελίδας που ενσωματώνεται θα έχει
το σχεδιασμό ακριβώς αυτής της ιστοσελίδας. Εν τω μεταξύ, τα CSS στυλ
της δικής μας ιστοσελίδας, καθώς και ο JavaScript κώδικάς μας
δεν θα επηρεάζουν το περιεχόμενο της ετικέτας iframe.
Στο περιεχόμενο του iframe μπορεί να εφαρμοστεί
ο δικός μας JavaScript, αλλά για αυτό πρέπει να ενεργήσουμε
με ειδικές μεθόδους.
Η ετικέτα iframe χρησιμοποιείται ευρέως σε ιστοσελίδες για την ενσωμάτωση βίντεο από το YouTube και άλλες πλατφόρμες, καθώς και για την εμφάνιση άρθρων και εικόνων από άλλες πηγές.
Ιδιότητες
| Ιδιότητα | Περιγραφή |
|---|---|
src |
Καθορίζει τη διεύθυνση της σελίδας που πρέπει να ενσωματωθεί. |
srcdoc |
Επιτρέπει τον ορισμό του περιεχομένου του iframe απευθείας στην ιδιότητα. |
frameborder |
Ορίζει το πλαίσιο γύρω από το iframe.
Η τιμή yes ορίζει πλαίσιο (από προεπιλογή),
ενώ η τιμή no αφαιρεί το πλαίσιο.
|
scrolling |
Ορίζει τις γραμμές κύλισης μέσα στο iframe.
Η τιμή auto - κύλιση κατά ανάγκη (από προεπιλογή),
η τιμή yes - κύλιση πάντα,
η τιμή no - χωρίς κύλιση.
|
Παράδειγμα
Ας εισάγουμε στην ιστοσελίδα μας ένα iframe με άλλη ιστοσελίδα (για παράδειγμα ας πάρουμε το code.mu):
<iframe src="https://code.mu/" width="600" height="400"></iframe>
:
Παράδειγμα
Ας εισάγουμε στην ιστοσελίδα μας ένα βίντεο από το YouTube:
<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
:
Παράδειγμα
Ας γράψουμε το περιεχόμενο απευθείας στο iframe:
<iframe
srcdoc="<h1>head</h1><p>text</p>"
width="300"
height="200">
</iframe>
: