Στη δουλειά σήμερα, αντιμετώπισα την ανάγκη για προβολή μιας ιστοσελίδας σε πλήρη οθόνη, οπότε έλεγξα το Baidu και βρήκα ένα πρόσθετο jQuery για εμφάνιση ιστοσελίδων σε πλήρη οθόνη: jquery FullScreen Plugin. Επιτρέπει την εμφάνιση ιστοσελίδων σε πλήρη οθόνη για μια ποικιλία διαφορετικών προγραμμάτων περιήγησης, συμπεριλαμβανομένων των FF 10, Chrome και Safari, και χρησιμοποιείται για να παρέχει στους χρήστες μια πιο ευανάγνωστη έκδοση της ιστοσελίδας που μπορεί να κλιμακωθεί <canvas>και να <video>στοιχειοποιηθεί.
Προσθήκη πλήρους οθόνης jQuery
Περιγραφή
Αυτό το πρόσθετο jQuery παρέχει έναν απλό στη χρήση μηχανισμό για τον έλεγχο της νέας λειτουργίας πλήρους οθόνης των σύγχρονων προγραμμάτων περιήγησης. Προς το παρόν, μόνο νεότερα προγράμματα περιήγησης που βασίζονται σε Webkit (όπως το Chrome και το Safari), ο Firefox και ο IE11+ παρέχουν αυτήν τη νέα δυνατότητα πλήρους οθόνης.
Χρήση
Είσοδος σε λειτουργία πλήρους οθόνης
Μπορείτε να αλλάξετε ολόκληρη τη σελίδα ή ένα μεμονωμένο στοιχείο HTML σε λειτουργία πλήρους οθόνης:
$(έγγραφο).fullScreen(αληθές);
$("#myVideo").fullScreen(αληθές);
Αυτό λειτουργεί μόνο όταν ο κώδικας ενεργοποιήθηκε από μια αλληλεπίδραση χρήστη (Για παράδειγμα, ένα συμβάν onclick σε ένα κουμπί). Τα προγράμματα περιήγησης δεν επιτρέπουν την είσοδο σε λειτουργία πλήρους οθόνης χωρίς αλληλεπίδραση με τον χρήστη.
Έξοδος από τη λειτουργία πλήρους οθόνης
Η λειτουργία πλήρους οθόνης εξέρχεται πάντα μέσω του εγγράφου, αλλά αυτό το πρόσθετο το επιτρέπει επίσης μέσω οποιουδήποτε στοιχείου HTML. Στη συνέχεια, χρησιμοποιείται το έγγραφο κατόχου του επιλεγμένου στοιχείου HTML:
$(έγγραφο).fullScreen(false);
$("#myVideo").fullScreen(false);
Υποβολή ερωτήματος σε λειτουργία πλήρους οθόνης
Απλώς μην μεταβιβάσετε κανένα όρισμα στη μέθοδο πλήρους οθόνης για να ρωτήσετε την τρέχουσα κατάσταση. Η μέθοδος επιστρέφει το τρέχον στοιχείο πλήρους οθόνης (ή true εάν το πρόγραμμα περιήγησης δεν το υποστηρίζει) όταν η λειτουργία πλήρους οθόνης είναι ενεργή, false εάν δεν είναι ενεργή ή null όταν το πρόγραμμα περιήγησης δεν υποστηρίζει πλήρη οθόνη καθόλου λειτουργία. Έτσι, μπορείτε επίσης να χρησιμοποιήσετε αυτήν τη μέθοδο για να εμφανίσετε ένα κουμπί πλήρους οθόνης μόνο όταν το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία πλήρους οθόνης:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Εναλλαγή λειτουργίας πλήρους οθόνης
Η προσθήκη παρέχει μια άλλη μέθοδο για απλή εναλλαγή λειτουργίας πλήρους οθόνης:
$(document).toggleFullScreen();
Ειδοποιήσεις
Το πρόσθετο ενεργοποιεί ένα συμβάν πλήρους οθόνης στο έγγραφο όταν έχει αλλάξει η λειτουργία πλήρους οθόνης. Εάν το πρόγραμμα περιήγησης απέρριψε μια αλλαγή κατάστασης πλήρους οθόνης, τότε η προσθήκη ενεργοποιεί ένα συμβάν σφάλματος πλήρους οθόνης στο έγγραφο. Παράδειγμα:
$(document).bind("fullscreenchange", function() {
console.log("Πλήρης οθόνη " + ($(document).fullScreen() ? " on" : "off"));
});
$(document).bind("fullscreenerror", function() {
ειδοποίηση("Το πρόγραμμα περιήγησης απορρίφθηκε αλλαγή πλήρους οθόνης").
});
iframe πλήρους οθόνης
Η είσοδος σε λειτουργία πλήρους οθόνης μέσα από ένα iframe δεν επιτρέπεται από προεπιλογή, αλλά μπορεί να ενεργοποιηθεί με μερικά χαρακτηριστικά στο iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Γνωστά προβλήματα
Στον IE 11 εμφανίζεται μια κενή σελίδα κατά την είσοδο σε πλήρη οθόνη μέσα από ένα iframe. Δεν έχω ιδέα γιατί. Οποιαδήποτε βοήθεια είναι ευπρόσδεκτη.
Στο Safari (τουλάχιστον στο Safari 7) δεν επιτρέπεται είσοδος πληκτρολογίου στη λειτουργία πλήρους οθόνης.
Διεύθυνση GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Τουρίστες, αν θέλετε να δείτε το κρυφό περιεχόμενο αυτής της ανάρτησης, παρακαλώ Απάντηση
| 
Δημοσιεύτηκε στις 14/8/2017 4:34:52 μ.μ.
|
|
|
Δημοσιεύτηκε στις 14/8/2017 5:08:18 μ.μ.
|
Δημοσιεύτηκε στις 25/11/2017 2:35:17 μ.μ.
|
