HTML5全屏

最新推荐文章于 2023-05-11 20:37:36 发布

码农阳神

最新推荐文章于 2023-05-11 20:37:36 发布

阅读量329

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/qq_44797965/article/details/104329318

版权

前端知识专栏收录该内容

74 篇文章 0 订阅

订阅专栏

HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() 开启全屏显示
2、Node.cancelFullScreen() 关闭全屏显示由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
ms 微软 msRequestFullscreen
3、document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类选择器也有兼容性问题需要添加前缀思密达
:full-screen 、:-webkit-full-screen {}、:moz-full-screen {}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div:-webkit-full-screen {   /* 注意兼容性问题  全屏显示伪类选择器 */
  background-color: pink;
 }
 </style>
</head>
<body>
<div>
 <img src="pic1.png" height="300"  alt="">
 <button id="full">全屏显示</button>
 <button id="cancelFull">取消全屏</button>
 <button id="isFull">是否全屏</button>
</div>
 <script>
 // 全屏显示可以是任意元素
 // H5 API 存在兼容性问题  ie9 +  
 // 即使高版本浏览器有兼容性问题  
 // 不同浏览器需要添加不同的前缀 webkit  moz  o  ms 
 var div = document.querySelector("div");
 // 1 单击全屏显示
 document.querySelector("#full").onclick = function() {
  // div.webkitRequestFullScreen(); 开启全屏
  // 能力检测  做一个兼容性的解决方法
   if(div.requestFullScreen) {  // 正常浏览器 
    div.requestFullScreen();
   } else if (div.webkitRequestFullScreen) {  // webkit 内核
    div.webkitRequestFullScreen();
   } else if (div.mozRequestFullScreen) {  // moz
    div.mozRequestFullScreen();
   } else if (div.msRequestFullscreen) {  // ms 微软  这里面有个坑 别掉进去了
    div.msRequestFullscreen(); //  ms 里面这样写msRequestFullscreen()     s是小写的  
   } else {   // 欧朋
    div.oRequestFullScreen();
   }
 }
 // 2 取消全屏  跟元素没有关系  跟 document
 document.querySelector("#cancelFull").onclick = function() {
   document.webkitCancelFullScreen();  // document 退出全屏
 }
 // 3 是否全屏显示
  document.querySelector("#isFull").onclick = function() {
   alert(document.webkitIsFullScreen); // webkit是否存在 全屏状态
 }
 </script>
</body>
</html>

码农阳神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。1、Node.requestFullScreen() 开启全屏显示2、Node.cancelFullScreen() 关闭全屏显示由于其兼容性原因，不同浏览器需要添加前缀如：webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。Gecko内核浏览器：mo...
复制链接

扫一扫