JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ，那么如何用JavaScript控制页面全屏呢？MDN上提供的的API , 一个小demo验证一下！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏</title>
<style>
html,
body {
height: 100%;
} img {
display: block;
margin: 100px auto 0;
width: 900px;
cursor: pointer;
}
/* webkit和IE在元素进入全屏后，会保持元素原有的尺寸，所以需要通过css伪类进行设置 */
img:-webkit-full-screen{
width: 100%;
height: 100%;
} img:-ms-fullscreen {
width: 100%;
height: 100%;
}
</style>
</head> <body>
<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"
alt="">
<script>
window.onload = function () {
let img = document.querySelector('#target');
// 监听事件 注意不同浏览器的兼容性问问题 // 错误事件为：fullscreenerror ， 同样注意前缀
document.addEventListener('fullscreenchange' , function() {
console.log('全屏切换！')
})
document.addEventListener('webkitfullscreenchange' , function() {
console.log('全屏切换！')
})
document.addEventListener('mozfullscreenchange' , function() {
console.log('全屏切换！')
})
document.addEventListener('MSFullscreenChange' , function() {
console.log('全屏切换！')
})
// 图片点击切换全屏
if (isFUllScreenEnabled()) {
img.addEventListener('click', function () {
if (hasFullScreenElement()) {
exitFullScreen();
} else {
setFullScreen(img);
}
});
} else{
console.log('此浏览器不支持全屏');
}
}
// 判断浏览器是否支持全屏
function isFUllScreenEnabled() {
return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
}
// 判断是否有已全屏的元素
function hasFullScreenElement() {
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
}
// 将目标元素设置为全屏展示
function setFullScreen(target) {
if (target.requestFullscreen) {
target.requestFullscreen();
}
if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
}
if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
if (target.msRequestFullscreen) {
target.msRequestFullscreen();
}
}
// 文档退出全屏
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>
</body>
</html>
Api的使用都很简单，主要就是一个兼容性的问题，这个小demo，在Chrome，Firefox，Edge，IE 11 上测试过，都可以正常切换全屏，也可以正常监听事件。
要注意Firefox中方法的拼写，F为大写（囧 ， 报错了看了半天，原来是拼写错误），Chrome和IE的记得要加CSS伪类去设置样式。
JavaScript 全屏展示的更多相关文章
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- requestFullscreen实现全屏展示
requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...
- echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- javascript全屏操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- 给echarts加个“全屏展示”
echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...
- 开机自动调用.bat文件且浏览器全屏展示
1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...
随机推荐
- 零基础爬虫----python爬取豆瓣电影top250的信息（转）
今天利用xpath写了一个小爬虫,比较适合一些爬虫新手来学习.话不多说,开始今天的正题,我会利用一个案例来介绍下xpath如何对网页进行解析的,以及如何对信息进行提取的. python环境:pytho ...
- 创建第一次C语言程序
在这里我以VS2015为例,做演示.为什么要去演示怎样创建项目尼,因为我写第一个程序时,不知道该怎样用VS创建我的第一个应用程序. 第一步:打开VS环境如下 第二步:在开始出点击“新建项目”或在右上角 ...
- 关于php条形码生成(barcode)，修改样式
今天听错了需求,以为要重新设计条形码,第一次制作这个,经过搜索使用的barcode这个第三方的,具体使用步骤网上很多就不在这里详细介绍了.主要是今天遇到的样式修改问题: barcode经过查看是无法自 ...
- android的事件分发传递机制
事件的分发与传递最重要的三个处理方法是 dispatchTouchEvent onInterceptTouchEvent onTouchEvent 综合来说事件的 传递是由外层向里层传递,而处理是从里 ...
- linux 安装mysql相关和openjdk
新装的centos 6.9虚拟机 修改yum 服务器源 cd /etc/yum.repos.d/ rename repo repo.bak_$(date +%F) * 阿里的yum库 https:/ ...
- Julia 下载 安装 juno 开发环境搭建
Windows平台 Julia 的官网 (https://julialang.org) 下载链接(https://julialang.org/downloads) 下载完成后,如果想安装在 C 盘,则 ...
- Spring Boot学习笔记：整合H2数据库
H2数据库:java语言编写的嵌入式sql数据库.可以和应用一起打包发布. H2有三种连接模式(Connection Modes): Embedded mode (local connections ...
- VBA找相似体积的单元格值
在VBA中做了一个比较体积,如果体积相似就显示隔壁单元格的内容 Function VC(a, b As Range) 'VolumeCompare体积比较 Dim arry() As Variant ...
- Nginx的rewrite应用
Rewrite主要的功能是实现URL重写,Nginx 的 Rewrite 规则采用 PCRE Perl 兼容正则表达式的语法进行规则匹配,如相使用 Nginx 的 Rewrite 功能,在编译 Ngi ...
- session和cookie相关知识总结
HTTP协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端只需要简单的向服务器请求下载某些文件,无论是客户端还是服务器都没有必要纪录彼此过去的行为,每一次请求之间都是独立的. 人们很快发现 ...