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 ...
随机推荐
- html----input标签
HTML 5 <input> 标签 定义和用法 <input> 标签规定用户可输入数据的输入字段. 根据不同的 type 属性,输入字段有多种形态.输入字段可以是文本字段.复选 ...
- redis在windows系统下的安装和两个问题
今天首次接触redis,遇到一些问题,查了一些资料,在这里汇总整理下. redis的安装看这个:http://www.runoob.com/redis/redis-install.html. 问题1: ...
- 测试Linux下tcp最大连接数限制
现在做服务器开发不加上高并发根本没脸出门,所以为了以后吹水被别人怼“天天提高并发,你自己实现的最高并发是多少”的时候能义正言辞的怼回去,趁着元旦在家没事决定自己写个demo搞一搞. 这个测试主要是想搞 ...
- 大数据学习笔记1-大数据处理架构Hadoop
Hadoop:一个开源的.可运行于大规模集群上的分布式计算平台.实现了MapReduce计算模型和分布式文件系统HDFS等功能,方便用户轻松编写分布式并行程序. Hadoop生态系统: HDFS:Ha ...
- centos平台基于snort、barnyard2以及base的IDS（入侵检测系统）的搭建与测试及所遇问题汇总
centos平台基于snort.barnyard2以及base的IDS(入侵检测系统)的搭建与测试及所遇问题汇总 原创 2016年12月19日 01:20:03 标签: centos / snort ...
- ( function(){…} )()和( function (){…} () )是两种立即执行函数
函数声明:function fnName () {…};函数表达式 var fnName = function () {…};匿名函数:function () {}; fnName(); functi ...
- 设计模式学习心得<工厂方法 Factory Method>
概述 意图 业务代码中常常有构造对象的过程,它拥有大量的参数.并且有很多地方需要这对象. 简化对象构造过程. 主要解决 一个类在不同场景的频繁地创建,让不同对象的创建更有语义化,提高代码复用性. 何时 ...
- AX_UserInfo
UserInfoHelp::userInUserGroup(curuserid(), "Admin") EmplTable::userId2EmplId(curuserid()) ...
- CDH版本的hadoop下载
http://archive.cloudera.com/cdh5/cdh/5/加要下载的cdh版本插件 例如: http://archive.cloudera.com/cdh5/cdh/5/zooke ...
- zigbee3.0的协议特性
ZigBee协议有如下特性: 支持多种网络拓扑,比如点对点,点对多点,自组网: 低工作占空比能力,提供长电池供电的可能: 低延迟: 采用DSSS扩频技术: 每个网络最高可支持65,000节点 128- ...