js让页面全屏展示

蜡笔大帅

已于 2022-02-20 11:06:21 修改

阅读量1.8w

点赞数 7

文章标签： javascript 前端 html

于 2022-02-08 10:03:50 首次发布

本文链接：https://blog.csdn.net/jgujgu/article/details/122818678

版权

全屏API

H5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

需要注意的是：只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。

示例代码如下：

<!doctype html>
<html>
    <head>
      <meta charset="UTF-8"/>
        <title>全屏不全屏</title>
    </head>
    <body>
      <button id="fullScreen">全屏模式</button>
      <button id="noFullScreen">取消全屏</button>
     </body>
</html>
<script>
       document.getElementById("fullScreen").onclick=function(){
          if(document.documentElement.RequestFullScreen){
            document.documentElement.RequestFullScreen();
          }
          //兼容火狐
          console.log(document.documentElement.mozRequestFullScreen)
          if(document.documentElement.mozRequestFullScreen){
            document.documentElement.mozRequestFullScreen();
          }
          //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
          if(document.documentElement.webkitRequestFullScreen){
            document.documentElement.webkitRequestFullScreen();
          }
          //兼容IE,只能写msRequestFullscreen
          if(document.documentElement.msRequestFullscreen){
            document.documentElement.msRequestFullscreen();
          }
       }
       document.getElementById("noFullScreen").onclick=function(){
          if(document.exitFullScreen){
            document.exitFullscreen()
          }
          //兼容火狐
          console.log(document.mozExitFullScreen)
          if(document.mozCancelFullScreen){
            document.mozCancelFullScreen()
          }
          //兼容谷歌等
          if(document.webkitExitFullscreen){
            document.webkitExitFullscreen()
          }
          //兼容IE
          if(document.msExitFullscreen){
            document.msExitFullscreen()
          }
       }
</script>

全屏事件

如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。

document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});

document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });

全屏样式

全屏之后还可以选择性的调整样式，就和hover一样，如下所示：

:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }

工作之余用博客记录自己希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见

蜡笔大帅

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
js让页面全屏展示

全屏APIH5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。需要注意的是：只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。示例代码如下：<!doctype html><html> <head> &l
复制链接

扫一扫