Maison > interface Web > js tutoriel > Utilisez html5 js pour obtenir un effet de navigateur plein écran en cliquant sur un bouton_javascript skills

Utilisez html5 js pour obtenir un effet de navigateur plein écran en cliquant sur un bouton_javascript skills

WBOY
Libérer: 2016-05-16 16:46:37
original
1305 Les gens l'ont consulté

Dans le projet, nous devons rendre la fenêtre du navigateur en arrière-plan en plein écran, c'est-à-dire que nous cliquons sur un bouton pour obtenir l'effet plein écran en appuyant sur F11. En HTML5, le W3C a développé une API plein écran, qui peut obtenir des effets plein écran, et peut également créer des images, des vidéos, etc. sur la page en plein écran. Actuellement, seuls Google Chrome 15, safri5.1, firfox10, et prise en charge d'IE11

Plein écran

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//FireFox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else if (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}
Copier après la connexion

Quitter le plein écran

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 
Copier après la connexion

Surveillance des événements

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 
Copier après la connexion

Paramètres de style plein écran

Nous pouvons également définir le style lors de l'utilisation du navigateur en plein écran

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 
Copier après la connexion

Annexe

1 Une démo en ligne

http://robnyman.github.io/fullscreen/

2 Phishing API plein écran HTML5

http://www.36ria.com/5807

3 Plugin plein écran encapsulé par jquery

 http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 Une introduction plus détaillée à l'API plein écran

4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5 Différences d'affichage de l'API plein écran HTML5 dans FireFox/Chrome

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal