Το HTML iframe χρησιμοποιείται για να εμφανίσει μια ιστοσελίδα μέσα σε μια άλλη ιστοσελίδα.
Η σύνταξη για το iframe είναι η εξής:
<iframe src="url_ιστοσελίδας"></iframe>
Στο παραπάνω παράδειγμα, ο κώδικας <iframe> ορίζει ένα πλαίσιο όπου η ιστοσελίδα που θέλουμε να εμφανίσουμε θα φορτωθεί. Η διεύθυνση URL της ιστοσελίδας πρέπει να προσδιορίζεται μέσω του “src” χαρακτηριστικού.
Παράδειγμα:
<iframe src="https://www.example.com"></iframe>
Στο παραπάνω παράδειγμα, το πλαίσιο iframe θα εμφανίσει την ιστοσελίδα “https://www.example.com”.
Μπορείτε να χρησιμοποιήσετε το iframe για να ενσωματώσετε άλλες ιστοσελίδες, όπως χάρτες, βίντεο, ή άλλες πηγές περιεχομένου, μέσα στην ιστοσελίδα σας. Επίσης, μπορείτε να ορίσετε το ύψος και το πλάτος του iframe χρησιμοποιώντας τα αντίστοιχα χαρακτηριστικά “height” και “width”.
Χρησιμοποιήστε τα χαρακτηριστικά “height” και “width” για να καθορίσετε το μέγεθος του iframe.
Το ύψος (height) και το πλάτος (width) προεπιλέγονται σε pixels:
<iframe src="url_ιστοσελίδας" height="300" width="500"></iframe>
Στο παραπάνω παράδειγμα, το iframe έχει ύψος 300 pixels και πλάτος 500 pixels. Μπορείτε να προσαρμόσετε αυτές τις τιμές ανάλογα με τις ανάγκες σας.
Επιπλέον, μπορείτε να χρησιμοποιήσετε άλλες μονάδες μέτρησης για το ύψος και το πλάτος, όπως τα pixels (px), το ποσοστό (%) ή τα διαθέσιμα ενεργά γράμματα (em). Για παράδειγμα:
<iframe src="url_ιστοσελίδας" height="50%" width="80%"></iframe>
Σε αυτήν την περίπτωση, το iframe θα έχει ύψος ίσο με το 50% του γονικού στοιχείου και πλάτος ίσο με το 80% του γονικού στοιχείου.
Προσαρμόστε τις τιμές του ύψους και του πλάτους σύμφωνα με τις ανάγκες σας για να εμφανιστεί το iframe με το επιθυμητό μέγεθος.
[adinserter block=”2″]
Μπορείτε επίσης να προσθέσετε το χαρακτηριστικό style και να χρησιμοποιήσετε τις ιδιότητες ύψους (height) και πλάτους (width) της CSS:
<iframe src="url_ιστοσελίδας" style="height: 300px; width: 500px;"></iframe>
Στο παραπάνω παράδειγμα, το iframe έχει ύψος 300 pixels και πλάτος 500 pixels χρησιμοποιώντας τις ιδιότητες της CSS.
Μπορείτε να προσαρμόσετε τις τιμές του ύψους και του πλάτους ανάλογα με τις ανάγκες σας και να χρησιμοποιήσετε άλλες μονάδες μέτρησης (όπως τα ποσοστά ή τα em) αντί για pixels, όπως περιγράφηκε προηγουμένως.
Από προεπιλογή, ένα iframe έχει ένα περίγραμμα γύρω από αυτό.
Για να αφαιρέσετε το περίγραμμα, προσθέστε το χαρακτηριστικό style και χρησιμοποιήστε την ιδιότητα border της CSS:
<iframe src="url_ιστοσελίδας" style="border: none;"></iframe>
Στο παραπάνω παράδειγμα, το iframe θα μηδενίσει το περίγραμμά του χρησιμοποιώντας την ιδιότητα border της CSS.
Με αυτόν τον τρόπο, θα αφαιρεθεί το περίγραμμα γύρω από το iframe και θα εμφανίζεται χωρίς περιθώρια.
Εάν θέλετε να προσαρμόσετε άλλες ιδιότητες του περιγράμματος, μπορείτε να χρησιμοποιήσετε την ιδιότητα border με διάφορες τιμές CSS, όπως “border-width”, “border-style” και “border-color”.
Με τη χρήση CSS, μπορείτε επίσης να αλλάξετε το μέγεθος, το στυλ και το χρώμα του περιγράμματος του iframe:
<iframe src="url_ιστοσελίδας" style="border: 2px solid red;"></iframe>
Στο παραπάνω παράδειγμα, το iframe θα έχει ένα περίγραμμα με πάχος 2 pixels, στυλ “solid” και κόκκινο χρώμα.
Μπορείτε να προσαρμόσετε τις τιμές του περιγράμματος (πάχος, στυλ, χρώμα) ανάλογα με τις ανάγκες σας. Μπορείτε να χρησιμοποιήσετε διάφορα στυλ περιγράμματος όπως “dotted”, “dashed”, “double”, “groove”, “ridge”, “inset”, “outset” και άλλα.
Παράδειγμα:
<iframe src="url_ιστοσελίδας" style="border: 1px dotted blue;"></iframe>
Σε αυτήν την περίπτωση, το περίγραμμα του iframe θα έχει πάχος 1 pixel, στυλ “dotted” και μπλε χρώμα.
Χρησιμοποιώντας την CSS, μπορείτε να προσαρμόσετε το περίγραμμα του iframe όπως επιθυμείτε, πειραματιζόμενοι με διάφορες τιμές και στυλ.
Ένα iframe μπορεί να χρησιμοποιηθεί ως προορισμός πλαισίου (target frame) για ένα σύνδεσμο.
Το χαρακτηριστικό target του συνδέσμου πρέπει να αναφέρεται στο χαρακτηριστικό name του iframe:
<iframe src="url_ιστοσελίδας" name="myFrame"></iframe> <a href="url_στοχου" target="myFrame">Σύνδεσμος προς το πλαίσιο</a>
Στο παραπάνω παράδειγμα, το iframe έχει το όνομα “myFrame” μέσω του χαρακτηριστικού name. Ο σύνδεσμος προς το πλαίσιο χρησιμοποιεί το χαρακτηριστικό target με την τιμή “myFrame”, οποία αντιστοιχεί στο όνομα του iframe.
Όταν ο σύνδεσμος κλικαριστεί, η συνδεδεμένη ιστοσελίδα θα φορτωθεί μέσα στο πλαίσιο του iframe που έχει το συγκεκριμένο όνομα.
Αυτό επιτρέπει τον στόχο ενός συνδέσμου να ανοίγει μια συγκεκριμένη ιστοσελίδα μέσα στο iframe, ενώ οι υπόλοιποι συνδέσμοι της σελίδας ανοίγουν σε νέα καρτέλα ή παράθυρο.