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 ...
随机推荐
- gitlab 备份与恢复
1. gitlab 备份命令:# gitlab-rake gitlab:backup:create 1.1 查看备份文件(默认备份路径:/var/opt/gitlab/backups)# ls /va ...
- 如何用poi生成导出excel
import org.apache.poi.ss.usermodel.CellStyle; import org.apache.poi.ss.usermodel.Sheet; import java. ...
- 【Django】关于上传图片遇到的问题
今天测试上传图片的时候,发现一只报错说找不到文件:FileNotFoundError 通过检查路径的输出,发现首先在settings配置路径的时候有问题 MEDIA_ROOT=os.path.join ...
- python 路径处理
1.分解路径名 比如要把xxx/yyy/zzz.py 分解成文件名和目录 两种方法: 一.os.path.split(file) 二.os.path.basename() ; os.path.d ...
- PCIe 驱动流程（LTSSM）
本次的工作是完成刚流片的FPGA中PCIe IP核的bring up,也就是芯片的中PCIe的第一个使用者,将PCIe IP核正常使用起来,并配合公司的EDA团队,完成PCIe IP核到用户的呈现. ...
- 360. Sort Transformed Array二元一次方程返回大数序列
［抄题］: Given a sorted array of integers nums and integer values a, b and c. Apply a quadratic functio ...
- [leetcode]72. Edit Distance 最少编辑步数
Given two words word1 and word2, find the minimum number of operations required to convert word1 to ...
- python程序编写简介
语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...
- Linux下所有命令失效的解决方法
今天在设置环境变量时,一不小心,设置错了,系统中的所有命令全部失效了,可把我急坏了,下面用一条命令可解决: 解决办法:重新设置环境变量PATH export PATH=/usr/sbin:/usr/b ...
- QT-QWebEngineView-createWindow弹出页面解决
首先要写一个继承QWebEngineView的类 头文件: #ifndef WEBBROWSER_H #define WEBBROWSER_H #include <QWebEngineView& ...