浏览器都有页面全屏的功能 F11 ，那么如何用JavaScript控制页面全屏呢？MDN上提供的的API , 一个小demo验证一下！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>全屏</title>
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 100%;
  12.         }
  13.  
  14.         img {
  15.             display: block;
  16.             margin: 100px auto 0;
  17.             width: 900px;
  18.             cursor: pointer;
  19.         }
  20.         /* webkit和IE在元素进入全屏后，会保持元素原有的尺寸，所以需要通过css伪类进行设置 */
  21.         img:-webkit-full-screen{
  22.             width: 100%;
  23.             height: 100%;
  24.         }
  25.  
  26.         img:-ms-fullscreen {
  27.             width: 100%;
  28.             height: 100%;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <img id="target" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530343927072&di=ba9a25dc1d88a14556abf44106a32a4f&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe9%2F3d%2Ffc%2Fe93dfc90c7406e68dd72afac6dda0357.jpg"
  35.         alt="">
  36.     <script>
  37.         window.onload = function () {
  38.             let img = document.querySelector('#target');
  39.             // 监听事件 注意不同浏览器的兼容性问问题
  40.  
  41. 　　　　　　　// 错误事件为：fullscreenerror ， 同样注意前缀
  1.             document.addEventListener('fullscreenchange' , function() {
  2.                 console.log('全屏切换！')
  3.             })
  4.             document.addEventListener('webkitfullscreenchange' , function() {
  5.                 console.log('全屏切换！')
  6.             })
  7.             document.addEventListener('mozfullscreenchange' , function() {
  8.                 console.log('全屏切换！')
  9.             })
  10.             document.addEventListener('MSFullscreenChange' , function() {
  11.                 console.log('全屏切换！')
  12.             })
  13. 　　　　　　　// 图片点击切换全屏
  14.             if (isFUllScreenEnabled()) {
  15.                 img.addEventListener('click', function () {
  16.                     if (hasFullScreenElement()) {
  17.                         exitFullScreen();
  18.                     } else {
  19.                         setFullScreen(img);
  20.                     }
  21.                 });
  22.             } else{
  23.                 console.log('此浏览器不支持全屏');
  24.             }
  25.         }
  26.  
  27.         // 判断浏览器是否支持全屏
  28.         function isFUllScreenEnabled() {
  29.             return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
  30.         }
  31.  
  32.         // 判断是否有已全屏的元素
  33.         function hasFullScreenElement() {
  34.             return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
  35.         }
  36.  
  37.         // 将目标元素设置为全屏展示
  38.         function setFullScreen(target) {
  39.             if (target.requestFullscreen) {
  40.                 target.requestFullscreen();
  41.             }
  42.             if (target.webkitRequestFullscreen) {
  43.                 target.webkitRequestFullscreen();
  44.             }
  45.             if (target.mozRequestFullScreen) {
  46.                 target.mozRequestFullScreen();
  47.             }
  48.             if (target.msRequestFullscreen) {
  49.                 target.msRequestFullscreen();
  50.             }
  51.         }
  52.  
  53.         // 文档退出全屏
  54.         function exitFullScreen() {
  55.             if (document.exitFullscreen) {
  56.                 document.exitFullscreen();
  57.             }
  58.             if (document.webkitExitFullscreen) {
  59.                 document.webkitExitFullscreen();
  60.             }
  61.             if (document.mozCancelFullScreen) {
  62.                 document.mozCancelFullScreen();
  63.             }
  64.             if (document.msExitFullscreen) {
  65.                 document.msExitFullscreen();
  66.             }
  67.         }
  68.     </script>
  69. </body>
  70.  
  71. </html>

　　Api的使用都很简单，主要就是一个兼容性的问题，这个小demo，在Chrome，Firefox，Edge，IE 11 上测试过，都可以正常切换全屏，也可以正常监听事件。

　　要注意Firefox中方法的拼写，F为大写（囧 ， 报错了看了半天，原来是拼写错误），Chrome和IE的记得要加CSS伪类去设置样式。

JavaScript 全屏展示的更多相关文章

  1. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  3. requestFullscreen实现全屏展示

    requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...

  4. echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  5. HTML5在手机端实现视频全屏展示

    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...

  6. javascript全屏操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. h5的api dom全屏展示

    下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...

  8. 给echarts加个“全屏展示”

    echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...

  9. 开机自动调用.bat文件且浏览器全屏展示

    1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...

随机推荐

  1. WebApi设置SessionState为Required

    public override void Init() { //在注册管道事件中 require session state //只能在引发“HttpApplication.AcquireReques ...

  2. 关于手机微网站ICP备案

    今天终于拨通了陕西省通信管理局的电话,并告诉对方我们做的是一个化妆品的微网站,会涉及到使用使用支付宝支付. 询问"xxx微网站"网站经营类型,对方告知虽然使用支付宝,但是是微网站, ...

  3. 转：Java的各种类型转换汇总

    java类型转换 Integer String Long Float Double Date 1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Intege ...

  4. Linux学习三部曲(之二)

    新建Linux分区以及文件系统 今天,我们来聊聊在linux上建立分区和文件系统.windows系统建立分区可以借助分区工具,那么在linux分区以及文件系统又该如何操作呢? 打开secureCRT, ...

  5. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  6. Linux和Uboot下eMMC boot分区读写

    关键词:eMMC boot.PARTITION_CONFIG.force_ro等. 1. eMMC的分区 大部分eMMC都有类似如下的分区,其中BOOT.RPMB和UDA一般是默认存在的,gpp分区需 ...

  7. 英语口语练习系列-C24-杂技-问候语-乡愁

    1. 词汇-杂技 acrobatics noun [ U ] UK /ˌæk.rəˈbæt.ɪks/ US /ˌæk.rəˈbæt̬.ɪks/ the skills of an acrobat 杂技 ...

  8. php 对象数组互转

    数组转对象 function array2object($array) {   if (is_array($array)) {     $obj = new StdClass();     forea ...

  9. Light OJ 1406 Assassin`s Creed 状态压缩DP+强连通缩点+最小路径覆盖

    题目来源:Light OJ 1406 Assassin`s Creed 题意:有向图 派出最少的人经过全部的城市 而且每一个人不能走别人走过的地方 思路:最少的的人能够走全然图 明显是最小路径覆盖问题 ...

  10. Python（二）之对象类型

    本篇记录Python对象类型 开始仍然是先掌握几个查看对象有用的函数,id,type,print 查看对象身份.类型.值:记住以下两个命令id,type 两个对象的比较 以上三个分别是 身份比较.对象 ...