Τα Inline Frames σας επιτρέπουν να συμπεριλάβετε περιεχόμενο από εξωτερικές πηγές στις σελίδες σας
Τα inline frames, συνήθως αναφέρονται μόνο ως "iframes", είναι ο μόνος τύπος πλαισίου που επιτρέπεται στο HTML5. Αυτά τα πλαίσια είναι ουσιαστικά ένα τμήμα της σελίδας σας που "κόψατε". Στο χώρο που έχετε αποκόψει από τη σελίδα, μπορείτε να τροφοδοτήσετε μια εξωτερική ιστοσελίδα. Στην ουσία, ένα iframe είναι ένα άλλο παράθυρο προγράμματος περιήγησης που βρίσκεται ακριβώς μέσα στην ιστοσελίδα σας. Βλέπετε iframes που χρησιμοποιούνται συνήθως σε ιστότοπους που πρέπει να περιλαμβάνουν εξωτερικό περιεχόμενο όπως έναν χάρτη Google ή ένα βίντεο από το YouTube.
Και οι δύο δημοφιλείς ιστότοποι χρησιμοποιούν iframes στον ενσωματωμένο κώδικα τους.
Πώς να χρησιμοποιήσετε το στοιχείο IFRAME
Το στοιχείο χρησιμοποιεί τα παγκόσμια στοιχεία HTML5 καθώς και διάφορα άλλα στοιχεία. Τέσσερα είναι επίσης χαρακτηριστικά στο HTML 4.01:
- -η διεύθυνση URL για την πηγή του πλαισίου
- -το ύψος του παραθύρου
- -το πλάτος του παραθύρου
- -το όνομα του παραθύρου
Και τρεις είναι νέες στο HTML5:
- srcdoc - το HTML για την πηγή του πλαισίου. Αυτό το χαρακτηριστικό υπερισχύει έναντι οποιασδήποτε διεύθυνσης URL στο χαρακτηριστικό src
- sandbox - μια λίστα χαρακτηριστικών που θα πρέπει να επιτρέπονται ή να απαγορεύονται στο παράθυρο πλαισίου
- απρόσκοπτη - ενημερώνει τον πράκτορα χρήστη ότι το iframe θα πρέπει να αποδίδεται σαν να είναι αόρατα μέρος του γονικού εγγράφου
Για να δημιουργήσετε ένα απλό iframe, ορίζετε τη διεύθυνση URL προέλευσης και το πλάτος και το ύψος:
Έχετε υπόψη ότι μπορείτε να επιλέξετε να μην χρησιμοποιείτε τιμές εικονοστοιχείων για τις ρυθμίσεις του iframe σας, αλλά μπορεί να αποφασίσετε να χρησιμοποιήσετε ένα ποσοστό.
Εάν δημιουργείτε έναν ανταποκρινόμενο ιστότοπο του οποίου το μέγεθος θα πρέπει να αλλάξει με διαφορετικά μεγέθη οθόνης, αυτά τα ποσοστά θα είναι σημαντικά.
Υπάρχουν επίσης ορισμένα χαρακτηριστικά που ισχύουν στο HTML 4.01, αλλά έχουν ξεπερασθεί στο HTML5. Εφόσον οι περισσότεροι ιστότοποι σήμερα χρησιμοποιούν HTML5 +, αυτά τα χαρακτηριστικά είναι αυτά που δεν θα θέλετε να χρησιμοποιήσετε (αλλά τα οποία μπορείτε να δείτε σε ορισμένα έγγραφα παλαιού τύπου).
- -επιπλέον, χρησιμοποιήστε ένα στοιχείο Α για σύνδεση με μια περιγραφή
- -δεν, χρησιμοποιήστε την ιδιότητα float CSS
- επιτρέψτε τη διαφάνεια - αντί να χρησιμοποιήσετε την ιδιότητα φόντου CSS για να κάνετε το ifram διαφανές
- -δεν χρησιμοποιεί τη συνοριακή ιδιότητα CSS
- marginheight -δεν, χρησιμοποιήστε την ιδιότητα περιθωρίου CSS
- marginwidth -δεν , χρησιμοποιήστε την ιδιότητα περιθωρίου CSS
- -δεν, χρησιμοποιήστε την ιδιότητα υπερχείλισης CSS
Υποστήριξη προγράμματος περιήγησης IFRAME
Το στοιχείο IFRAME υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης:
- Android
- Χρώμιο
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Σαφάρι
Αν δεν εμφανίζεται κανένας αριθμός έκδοσης στην παραπάνω λίστα, αυτό συμβαίνει επειδή το υποστηρίζουν όλες οι εκδόσεις αυτού του προγράμματος περιήγησης.
Ένα πράγμα που πρέπει να προσέξουμε είναι ότι ενώ όλα τα προγράμματα περιήγησης υποστηρίζουν το στοιχείο IFRAME, υπάρχει ακόμα περιορισμένη υποστήριξη για κάποιες από τις δυνατότητες HTML5.
- Η χρήση υπερχείλισης για απενεργοποίηση της κύλισης δεν είναι αξιόπιστη. Εάν δεν θέλετε γραμμές κύλισης στα πλαίσια iframe, θα πρέπει να συνεχίσετε να χρησιμοποιείτε το χαρακτηριστικό κύλισης.
- Τα αρχεία srcdoc, sandbox και απρόσκοπτα δεν υποστηρίζονται από κανένα πρόγραμμα περιήγησης αυτή τη στιγμή.
Σύνδεση με τα εσωτερικά πλαίσια
Όταν δίνετε στα iframes σας ένα όνομα ή ένα id, μπορείτε να τοποθετήσετε τους συνδέσμους σας σε αυτό το πλαίσιο με το χαρακτηριστικό στο στοιχείο A. Στη συνέχεια, όταν ένας χρήστης κάνει κλικ στον σύνδεσμο, θα ανοίξει μέσα στο αναφερόμενο iframe παρά στο τρέχον παράθυρο.
Δοκιμάστε τον εαυτό σας. Πληκτρολογήστε τα ακόλουθα σε μια ιστοσελίδα:
Αν το έγγραφο που ανοίγει στο IFRAME δεν έχει οριστεί στόχοι , τότε όλοι αυτοί οι σύνδεσμοι θα ανοίξουν στο ίδιο iframe με το γονικό έγγραφο.
Μπορείτε να χρησιμοποιήσετε αυτή τη λειτουργία για να κάνετε συνδέσεις σε ένα IFRAME να αλλάξετε τα περιεχόμενα ενός άλλου IFRAME στην ίδια σελίδα.
IFrames και Ασφάλεια
Το στοιχείο IFRAME, από μόνο του, δεν αποτελεί κίνδυνο για εσάς ή τους αναγνώστες σας.
Δυστυχώς, τα iframes έχουν αποκτήσει κακή φήμη επειδή μπορούν να χρησιμοποιηθούν από κακόβουλους ιστότοπους για να συμπεριλάβουν περιεχόμενο που μπορεί να μολύνει τον υπολογιστή του επισκέπτη χωρίς να το δει στη σελίδα. Αυτό γίνεται με συνδέσμους που οδηγούν στο αόρατο IFRAME και τα scripts απενεργοποιούν τον κακόβουλο κώδικα. Ο χρήστης κάνει κλικ στον σύνδεσμο και πιστεύει ότι ο σύνδεσμος είναι σπασμένος επειδή δεν φαίνεται να συμβεί τίποτα, αλλά ένα σενάριο είχε ξεκινήσει εκεί όπου δεν μπορούσαν να το δουν.
Υπάρχουν επίσης ιούς υπολογιστών που θα εισάγουν ένα αόρατο IFRAME στις ιστοσελίδες σας, μετατρέποντας αποτελεσματικά τον ιστότοπό σας σε ένα botnet. Μπορούν να το κάνουν αυτό μέσω της έγχυσης SQL και άλλων επιθέσεων.
Το πράγμα που πρέπει να θυμάστε όταν συμπεριλαμβάνετε ένα IFRAME στην ιστοσελίδα σας είναι ότι οι χρήστες σας είναι εξίσου ασφαλείς με το περιεχόμενο όλων των ιστότοπων με τους οποίους συνδέεστε. Εάν έχετε λόγο να αισθανθείτε ότι ένας ιστότοπος είναι αναξιόπιστος, μην το συνδέετε με οποιονδήποτε τρόπο και σίγουρα δεν συμπεριλαμβάνετε τα περιεχόμενά του σε ένα IFRAME. Ωστόσο, η σύνδεση με τις δικές σας σελίδες στα πλαίσια iframes δεν αποτελεί κίνδυνο για εσάς ή τους χρήστες σας.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο στις 11/7/16 από τον Jeremy Girard