communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > 用html5 js实现浏览器全屏

用html5 js实现浏览器全屏

WBOY
Libérer： 2016-05-17 09:08:08
original
2105 Les gens l'ont consulté
        项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持。


全屏


  1. var docElm = document.documentElement;

  3. //W3C  

  5. if (docElm.requestFullscreen) {  

  7.     docElm.requestFullscreen();  

  9. }

  11. //FireFox  

  13. else if (docElm.mozRequestFullScreen) {  

  15.     docElm.mozRequestFullScreen();  

  17. }

  19. //Chrome等  

  21. else if (docElm.webkitRequestFullScreen) {  

  23.     docElm.webkitRequestFullScreen();  

  25. }

  27. //IE11

  29. else if (elem.msRequestFullscreen) {

  31.   elem.msRequestFullscreen();

  33. }
复制代码


退出全屏


  1. if (document.exitFullscreen) {  

  3.     document.exitFullscreen();  

  5. }  

  7. else if (document.mozCancelFullScreen) {  

  9.     document.mozCancelFullScreen();  

  11. }  

  13. else if (document.webkitCancelFullScreen) {  

  15.     document.webkitCancelFullScreen();  

  17. }

  19. else if (document.m**itFullscreen) {

  21.       document.m**itFullscreen();

  23. }
复制代码


事件监听


  1. document.addEventListener("fullscreenchange", function () {  

  3.     fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);  

  5.    

  7. document.addEventListener("mozfullscreenchange", function () {  

  9.     fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);  

  11.    

  13. document.addEventListener("webkitfullscreenchange", function () {  

  15.     fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);

  17. document.addEventListener("msfullscreenchange", function () {

  19.     fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
复制代码


全屏样式设置


在浏览器全屏的使用我们还可以进行样式设置


  1. html:-moz-full-screen {  

  3.     background: red;  

  5. }  

  7.    

  9. html:-webkit-full-screen {  

  11.     background: red;  

  13. }  

  15.    

  17. html:fullscreen {  

  19.     background: red;  

  21. }
复制代码


附录


1 一个在线的Demo
    http://robnyman.github.io/fullscreen/
2   HTML5全屏API之网络钓鱼
      http://www.36ria.com/5807
3   jquery封装的全屏插件
     http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4  更加详细的全屏API介绍
    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


Étiquettes associées：
HTML5教程 HTML5中国 用html5 js实现浏览器全屏 html5cn html5资料 html5文章 htm
source：php.cn
Article précédent：7款HTML5精美应用教程 让你立即爱上HTML5 Article suivant：怎样制作单页网站？国外优秀案例给你灵感
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
Derniers articles par auteur
Derniers numéros
Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
Depuis 2024-04-06 14:53:12
0
1
425
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Problème d'installation de Prestashop : Impossible d'installer le module personnalisé Je suis nouveau dans le développement de modules Prestashop. J'essaie de créer le premier ...
Depuis 2024-04-03 19:24:44
0
1
402
Tutoriel PHP : Comment télécharger du texte et des images sur Linkedin en utilisant PHP ? J'essaie de télécharger du texte, des images et des liens à l'aide de LinkedinsRestAPI (ht...
Depuis 2024-04-03 18:42:29
0
1
420
Impossible de recevoir des informations de ma base de données MySQL malgré avoir vu des tutoriels faisant exactement la même chose J'essaie donc de créer un programme qui lit et écrit dans une base de données MySQL, ce qu...
Depuis 2024-04-03 14:46:04
0
1
298
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal