首页 / JAVASCRIPT / 用html5js实现浏览器全屏

用html5js实现浏览器全屏

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用html5js实现浏览器全屏，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2034字，纯文字阅读大概需要3分钟。

内容图文

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按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);



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

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



  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. }



  9. html:-webkit-full-screen {

  11. background: red;

  13. }



  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


内容总结

以上是互联网集市为您收集整理的用html5js实现浏览器全屏全部内容，希望文章能够帮你解决用html5js实现浏览器全屏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389773.html

来源：【匿名】