Η μέθοδος requestFullscreen() του Fullscreen API

Ορισμός και χρήση

requestFullscreen() Η μέθοδος ανοίγει το στοιχείο σε πλήρη οθόνη.

Σημείωση:Χρησιμοποιήστε Η μέθοδος exitFullscreen()Απενεργοποίηση πλήρους οθόνης.

Παράδειγμα

Παράδειγμα 1

Εμφανίστε το στοιχείο <video> σε πλήρη οθόνη:

/* Αποκτήστε το στοιχείο που θα εμφανιστεί σε πλήρη οθόνη (στο παράδειγμα αυτό το βίντεο):*/
var elem = document.getElementById("myvideo");
/* Όταν εκτελείτε τη συνάρτηση openFullscreen() ανοίγει την οθόνη σε πλήρη οθόνη το βίντεο.
Λάβετε υπόψη ότι πρέπει να περιλαμβάνουμε τα πρόσθετα των διαφόρων προγραμματιστών, καθώς δεν υποστηρίζουν την ιδιότητα requestFullscreen */
}
  elem.webkitRequestFullscreen();
    else if (elem.msRequestFullscreen) { /* IE11 */
  }
    elem.msRequestFullscreen();
  /* Κλείσιμο πλήρους οθόνης */
    function closeFullscreen() {
  }
}

Προσωπική δοκιμή

Παράδειγμα 2

Για να ανοίξετε την σελίδα HTML σε πλήρη οθόνη, χρησιμοποιήστε το document.documentElement αντί για το document.getElementById("element").Σε αυτό το παράδειγμα, χρησιμοποιήσαμε επίσης μια συνάρτηση κλείσματος για να κλείσουμε την πλήρη οθόνη:

if (elem.requestFullscreen) {
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) { /* Safari */
}
  elem.webkitRequestFullscreen();
    else if (elem.msRequestFullscreen) { /* IE11 */
  }
    elem.msRequestFullscreen();
  /* Κλείσιμο πλήρους οθόνης */
    function closeFullscreen() {
  }
}
if (document.exitFullscreen) {
document.exitFullscreen();
  else if (document.webkitExitFullscreen) { /* Safari */
    }
  document.webkitExitFullscreen();
    else if (document.msExitFullscreen) { /* IE11 */
  }
    document.msExitFullscreen();
  }
}

Προσωπική δοκιμή

Παράδειγμα 3

Όταν η σελίδα βρίσκεται σε λειτουργία πλήρους οθόνης, μπορείτε επίσης να χρησιμοποιήσετε τη CSS για να ρυθμίσετε το στυλ της σελίδας:

/* Γλώσσα διατύπωσης για το Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* Γλώσσα διατύπωσης για το IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Γλώσσα διατύπωσης πρότυπου */
:fullscreen {
  background-color: yellow;
}

Προσωπική δοκιμή

Γλώσσα διατύπωσης

HTMLElementObject.requestFullscreen()

Παράμετροι

Χωρίς.

Τεχνικά λεπτομέρειες

Επιστροφή τιμής: Χωρίς επιστροφή τιμής.

Υποστήριξη περιηγητών

Τα αριθμήματα στην τάβλη σηματοδοτούν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως αυτή τη μέθοδο.

Σημειώσεις:Μερικές περιηγητές χρειάζονται συγκεκριμένα πρόθεσματα (βλέπε τα παρενθέσεις):

Χρωμέι Εντζ Φάιρεξ Σαφάρι Opera
Χρωμέι Εντζ Φάιρεξ Σαφάρι Opera
71.0
58.0		 71.0
79.0		 11.0 (ms)
64.0		 9.0 (moz) 6.0 (webkit)
58.0