În pachetul cu HTML5 a apărut un număr mare de API-uri noi. Unul dintre cele mai bune a devenit API-ul Fullscreen, care oferă un mod nativ pentru browser, permițându-vă să afișați o pagină web în modul ecran complet pentru utilizator.
Și este bine ca API-ul Fullscreen să fie foarte ușor de utilizat.
Metodele care fac parte din API-ul Fullscreen:
Această metodă permite unui element să intre în modul ecran complet.
Rularea acestui cod va determina pânza cu ID 'myCanvas' să intre în modul ecran complet.
Anulați modul ecran complet.
Returnează true dacă utilizatorul este în modul ecran complet.
Returnează elementul care se află în prezent în modul ecran complet.
Rețineți că acestea sunt metode standard. Pentru ca aceștia să funcționeze în toate browserele, trebuie să folosim prefixe.
Browsere acceptate
În prezent, Internet Explorer și Opera nu acceptă acest API.
Se pornește modul ecran complet
Mai întâi trebuie să aflăm ce metodă recunoaște browserul nostru. Pentru a face acest lucru, vom crea o funcție care va testa suportul metodei și va apela metoda de lucru:
Dacă oricare dintre metodele requestFullScreen returnează valoarea adevărată, atunci se numește metoda care este suportată de un anumit browser și utilizează pseudo-clasa cu prefixul său.
După aceea, tot ce trebuie să apelați pentru funcția pentru ecran complet:
Rezultatul va solicita utilizatorului pentru a permite trecerea la modul ecran complet, dacă activați tranziția, toate instrumentele din panoul de browser-ul va dispărea, iar întregul ecran este o pagină web sau un singur element.
Anulați modul ecran complet
Această metodă necesită și prefixe, așa că vom folosi aceeași idee pentru a testa suportul metodelor prin browsere. Să creăm o funcție care va determina ce prefix trebuie să folosim în funcție de browser-ul utilizatorului.
Această metodă nu necesită parametri, deoarece, spre deosebire de metoda requestFullScreen, se aplică întotdeauna întregului document.
CSS pseudo-clase
Acesta poate fi folosit pentru a specifica stilul oricărui element dintr-o pagină web atunci când pagina sau elementul se află în modul ecran complet. Această clasă pseudo-clasică poate fi utilă pentru specificarea mărimii elementelor de pagină, deoarece în modul ecran complet, spațiul de lucru al browserului se mărește.
Rețineți că nu puteți separa prefixele cu virgule, deoarece browserul nu le va putea recunoaște:
Pentru ca stilurile să fie aplicate corect, trebuie să plasați fiecare pseudo-clasă cu prefixul browser-ului în propriul bloc.