Πακέτο με HTML5 έφερε ένα μεγάλο αριθμό API καλοσύνη και ένα από τα καλύτερα ήταν το fullscreen API που παρέχει ένα εγγενές τρόπο για το πρόγραμμα περιήγησης να κάνει ό, τι ήταν δυνατό μόνο στο φλας για μεγάλο χρονικό διάστημα: εμφάνιση της ιστοσελίδας σε λειτουργία πλήρους οθόνης για το χρήστη.
Αυτό είναι χρήσιμο αν προβάλλετε βίντεο ή εικόνες ή αν αναπτύσσετε ένα παιχνίδι. Στην πραγματικότητα, οποιοδήποτε περιεχόμενο που πρέπει να επικεντρωθεί μπορεί να ωφεληθεί από το API Fullscreen.
Και το καλύτερο από όλα, το API Fullscreen είναι πραγματικά εύκολο στη χρήση ...
Ορισμένες μέθοδοι είναι μέρος του API πλήρους οθόνης:
element.requestFullScreen()Αυτή η μέθοδος επιτρέπει σε ένα μόνο στοιχείο να μεταβεί στην πλήρη οθόνη.
Document.getElementById(“myCanvas”).requestFullScreen()Αυτό θα προκαλέσει την αναπαραγωγή του καμβά με το αναγνωριστικό 'myCanvas' για πλήρη προβολή.
document.cancelFullScreen()Αυτό απλώς εξέρχεται από τη λειτουργία πλήρους οθόνης και επιστρέφει στην προβολή εγγράφων.
Document.fullScreenΑυτό θα είναι αληθές αν ο χρήστης βρίσκεται σε κατάσταση πλήρους οθόνης.
document.fullScreenElementΕπιστρέφει το στοιχείο που βρίσκεται αυτή τη στιγμή σε λειτουργία πλήρους οθόνης.
Σημειώστε ότι αυτές είναι οι τυπικές μέθοδοι, αλλά προς το παρόν θα χρειαστείτε προθέματα προμηθευτών για να το κάνετε αυτό στο Chrome, το Firefox και το Safari (ο Internet Explorer και το Opera δεν υποστηρίζουν αυτό το API στο παρόν).
Αφού πρώτα πρέπει να μάθουμε ποια μέθοδος αναγνωρίζει το πρόγραμμα περιήγησης θα δημιουργήσουμε μια λειτουργία που θα βρει τη σωστή μέθοδο για το πρόγραμμα περιήγησης και την κλήση:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Όπως μπορείτε να δείτε όλες αυτές οι λειτουργίες είναι να δείτε εάν οποιαδήποτε από τις μεθόδους requestFullScreen επιστρέφει true και στη συνέχεια καλεί τη λειτουργία για το σωστό πρόγραμμα περιήγησης χρησιμοποιώντας το πρόθεμα του προμηθευτή.
Μετά από αυτό το μόνο που πρέπει να κάνουμε είναι να καλέσετε τη λειτουργία fullScreen έτσι:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Αυτό θα στείλει μια ερώτηση στον χρήστη που ζητά άδεια για να μεταβεί στην πλήρη οθόνη, αν γίνει δεκτό ότι όλες οι γραμμές εργαλείων του προγράμματος περιήγησης θα εξαφανιστούν και το μόνο πράγμα στην οθόνη θα είναι η επιθυμητή ιστοσελίδα ή το μοναδικό στοιχείο.
Αυτή η μέθοδος απαιτεί επίσης προθέματα προμηθευτών, επομένως θα χρησιμοποιήσουμε την ίδια ιδέα όπως παραπάνω και θα δημιουργήσουμε μια συνάρτηση που θα καθορίσει ποιο πρόθεμα θα πρέπει να χρησιμοποιήσουμε σύμφωνα με το πρόγραμμα περιήγησης του χρήστη.
Ένα πράγμα που θα παρατηρήσετε είναι ότι αυτή η μέθοδος δεν χρειάζεται να περάσει κάποια στοιχεία, διότι σε αντίθεση με τη μέθοδο requestFullScreen ισχύει πάντα για όλο το έγγραφο.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Συνδυασμένη με αυτό το API JavaScript ήρθε μια ψευδο-τάξη CSS που ονομάζεται: πλήρης οθόνη και αυτό μπορεί να χρησιμοποιηθεί για να στυλ οποιαδήποτε στοιχεία στην ιστοσελίδα όταν είναι σε λειτουργία πλήρους οθόνης, αυτό μπορεί να είναι χρήσιμο επειδή το μέγεθος του προγράμματος περιήγησης αυξάνεται λίγο όταν ΛΕΙΤΟΥΡΓΙΑ ΠΛΗΡΟΥΣ ΟΘΟΝΗΣ.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Λάβετε υπόψη ότι δεν μπορείτε να διαχωρίσετε τα προθέματα προμηθευτών με κόμματα, επειδή το πρόγραμμα περιήγησης δεν θα τα διαβάσει:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Για να εφαρμοστούν σωστά τα στυλ, πρέπει να τοποθετήσετε κάθε πρόθεμα προμηθευτή στο δικό του μπλοκ.
Αυτό το API JavaScript είναι ένα από τα λιγότερο γνωστά που αποστέλλονται με HTML5, αλλά κατά τη γνώμη μου είναι τόσο αποτελεσματική και απλή στην εφαρμογή. Η βελτιωμένη εμπειρία χρήστη που επικεντρώνεται σε ένα μόνο στοιχείο, ειδικά για βίντεο, εικόνες και παιχνίδια αξίζει πολύ λίγες γραμμές κώδικα.
Έχετε εφαρμόσει το API Fullscreen οπουδήποτε; Για ποιες χρήσεις μπορείτε να το σκεφτείτε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εστίαση εικόνας μέσω Shutterstock.