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 ...
随机推荐
- 简单的TSQL基础编程格式，存储过程，视图
这里简单整理一下数据库简单的编程,变量定义,赋值,分支语句和循环(这里以Sqlserver),以及存储过程格式 首先是变量定义,赋值,分支语句 --======TSQL数据库基础编程,定义变量,赋值, ...
- Android 查阅博客2_APT
https://mp.weixin.qq.com/s/3zrAzOUGpovRRbuYnce3uw APT(Annotation Processing Tool) 即注解处理器,是一种注解处理工具,用 ...
- javascript中的getter和setter
在ECMAScript 5中,属性值可以用一个或两个方法代替,这两个方法就是getter和setter var man = { name : 'lidg', weibo : '@lidg', get ...
- 最小的K个数(python)
题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. # -*- coding:utf-8 -*- class So ...
- SVD及其在推荐系统中的作用
本文先从几何意义上对奇异值分解SVD进行简单介绍,然后分析了特征值分解与奇异值分解的区别与联系,最后用python实现将SVD应用于推荐系统. 1.SVD详解 SVD(singular value d ...
- 【收藏】UICrawler
基于 Appium 的 App UI 遍历 & Monkey 工具 (支持操作步骤回放) UICrawler https://github.com/lgxqf/UICrawler 基于Appi ...
- mysql linux安装
Mysql(使用版本5.7.25) 1. 检查是否已安装 #rpm -qa|grep -i mysql 2. 下载安装包 网址:https://dev.mysql.com/downloads/my ...
- 信号基础知识--FFT DFT
clc;close all;clear all; f0=10; fs=100; %采样率 t=1/fs:1/fs:2; %共两秒钟,共200个采样点.采样间隔T=1/100 y ...
- Java日志框架-logback的介绍及配置使用方法（纯Java工程）（转）
说明:内容估计有些旧,2011年的,但是大体意思应该没多大变化,最新的配置可以参考官方文档. 一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分 ...
- entity framework core 生成 postgresql 数据库实体
.net core 2.0 使用db first 方式生成 表 和context PM 控制台运行命令出错 Scaffold-DbContext "Host=localhost;Databa ...