Πώς να επιτύχετε την πλήρη οθόνη

Μάθετε πώς να δημιουργήσετε παράθυρα πλήρους οθόνης με JavaScript.

Πλήρης παράθυρο

Πώς να δείτε στοιχεία σε λειτουργία πλήρους οθόνης με JavaScript.

Κάντε κλικ στο κουμπί για να ανοίξετε το βίντεο σε λειτουργία πλήρους οθόνης:

Δοκιμάστε το προσωπικά

πλήρης βίντεο

Για να ανοίξουμε το στοιχείο σε πλήρη οθόνη, χρησιμοποιούμε: element.requestFullscreen() Μέθοδος:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

πλήρης έγγραφο οθόνης

Για να ανοίξετε την ολοκληρωμένη σελίδα σε πλήρη οθόνη, χρησιμοποιήστε: document.documentElement αντικαθιστώντας document.getElementById("element")。

Σε αυτό το παράδειγμα, χρησιμοποιούμε επίσης μια συνάρτηση κλεισίματος για να εξοδοιποιήσουμε την οθόνη πλήρους οθόνης:

Παράδειγμα

<script>
/* Λήψη documentElement (<html>) για την προβολή της σελίδας σε πλήρη οθόνη */
var elem = document.documentElement;
/* Ενσωμάτωση σε πλήρη οθόνη */
function openFullscreen() {
  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();
  }
}
</script>

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

Παράδειγμα

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Τυπική συνταγή */
:fullscreen {
  background-color: yellow;
}

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Περιγραφικό βιβλίο HTML DOM:Μέθοδος requestFullscreen()

Περιγραφικό βιβλίο HTML DOM:Μέθοδος exitFullscreen()

Περιγραφικό βιβλίο HTML DOM:Μέθοδος documentElement