网站首页 » 前端开发 » JavaScript » JavaScript 实现浏览器全屏模式及退出全屏模式
上一篇:
下一篇:

JavaScript 实现浏览器全屏模式及退出全屏模式

这是一个不怎么常用的 JavaScript 交互效果,一旦用到了,你就知道书到用时方恨少的痛苦了。所以还是有备无患,自己先过一篇即使有个印象也未常不是一件好事。

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 实现浏览器全屏及退出全屏 - 云库前端</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<button id="btn">全屏</button>
<button id="exit-btn">退出全屏</button>
</body>
</html>
JavaScript 代码
var btn = document.getElementById("btn");
var exitBtn = document.getElementById("exit-btn");
btn.onclick = function(){
    launchFullScreen(document.documentElement);
}
exitBtn.onclick = function(){
    exitFullScreen();
}

// 全屏,各种浏览器兼容写法
function launchFullScreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 }else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 }else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 }else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}

// 退出全屏,各种浏览器兼容写法
function exitFullScreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 }else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 }else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}

上面是兼容多种浏览器的写法,代码其实也非常地简单。

注意:

exitFullscreen 只能由 document 对象调用,而不是启动全屏时传入的对象(document.documentElement)。

这里有一点需要注意的是,我们不能真的调用封装好的方法,我们必需通过点击触发全屏或者退出全屏的方法,不然浏览器会给你送上一行警告:

警告

Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

大概的意思就是全屏只能通过用户手势触发。

除了 JavaScript 外,我们还可以通过 CSS 来实现在不同的模式下的样式设置,比如在全屏模式下要设置一个黑色的背景或者要给某个元素设置一些属性,具体样式代码可以看这里:

全屏 css 样式
:-webkit-full-screen {
    background: #000;
}
:-moz-full-screen {
    background: #000;
}
:-ms-fullscreen {
    background: #000;
}
:full-screen {
    background: #000;
}
:fullscreen {
    background: #000;
}
/* deeper elements */
:-webkit-full-screen video {
/* 全屏模式下 video 标签宽高设置为100% */
   width: 100%;
   height: 100%;
}
/* styling the backdrop*/
::backdrop {
  background: #000;
}
::-ms-backdrop {
  background: #000;
}

把上面的三段代码放到一个.html 文件中就可以看到效果了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-browser-full-screen-mode/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END