HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img src="../images/l1.jpg" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
/*全屏操作的主要方法和属性
* 1.requestFullScreen():开启全屏显示
* 不同浏览器需要添加不同的前缀
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
* 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/ window.onload=function(){
var div=document.querySelector("div");
/*添加三个按钮的点击事件*/
/*全屏操作*/
document.querySelector("#full").onclick=function(){
/*div.requestFullScreen();*/
/*div.webkitRequestFullScreen();*/
/*div.mozRequestFullScreen();*/
/*使用能力测试添加不同浏览器下的前缀*/
if(div.requestFullScreen){
div.requestFullScreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
}
} /*退出全屏*/
document.querySelector("#cancelFull").onclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msCancelFullScreen){
document.msCancelFullScreen();
}
} /*判断是否是全屏状态*/
document.querySelector("#isFull").onclick=function(){
/*两个细节：使用document判断 能力测试*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
}
else{
alert(false);
}
}
}
</script>
</body>
</html>
HTML5--浏览器全屏操作、退出全屏、是否全屏的更多相关文章
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- 微信video标签全屏无法退出bug 本文系转载
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- 微信video标签全屏无法退出bug
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- android开发：全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- QT5中全屏显示子窗口和取消全屏的方法
问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...
- [转载]从MyEclipse到IntelliJ IDEA-让你摆脱鼠标，全键盘操作
从MyEclipse转战到IntelliJ IDEA的经历 注转载址:http://blog.csdn.net/luoweifu/article/details/13985835 我一个朋友写了一篇“ ...
随机推荐
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 搜索（BFS）---计算在网格中从原点到特定点的最短路径长度
计算在网格中从原点到特定点的最短路径长度 [[1,1,0,1], [1,0,1,0], [1,1,1,1], [1,0,1,1]] 题目描述: 1表示可以经过某个地方,求解从(0,0)位置到(tr,t ...
- win32 socket 编程（三）——TCP/IP
一.TCP/IP解析 TCP/IP协议的核心部分是传输层协议(TCP.UDP),网络层协议(IP)和物理接口层,这三层通常是在操作系统内核中实现.因此用户一般不涉及.编程时,编程界面有两种形式: 1. ...
- Vue.js——60分钟组件快速入门（上篇）二
来源:https://www.cnblogs.com/keepfool/p/5625583.html 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小 ...
- spark复习笔记(4):RDD变换
一.RDD变换 1.返回执行新的rdd的指针,在rdd之间创建依赖关系.每个rdd都有一个计算函数和指向父rdd的指针 Spark是惰性的,因此除非调用某个转换或动作,否则不会执行任何操作,否则将触发 ...
- device eth0/1 does not seem to be present, delaying initialization
vmlite虚拟机启动出错,就把这个虚拟机删除掉重新建立,系统虚拟硬盘使用之前的,启动系统后不能上网,通过ifconfig查看网卡没启动,遂启动网卡服务,但是出错,就是:device eth0 doe ...
- 关于conda-新手必读
一.管理conda 通过anaconda来安装python及python包,让你不必关心系统是否安装了一些依赖,如zlib等等,anaconda已经集成了这些依赖,可以方便的安装python 下载请点 ...
- 模块（os模块）
一.模块 一个python文件就是一个模块. 模块可分为: 1.标准模块:python自带的模块是标准模块,可以直接import进行使用的. eg:import json.import random. ...
- django：一个RESTfull的接口从wsgi到函数的历程
1.wsgi将web server参数python化,封装为request对象传递给apllication命名的func对象并接受其传出的response参数,这个application在wsgi.p ...
- rmdir 删除空目录
1. 命令功能 rmdir:删除空目录,当目录不为空时,命令不能起作用. 2. 语法格式 rmdir [option] directory rmdir 选项 空目录 参数 参数说明 -p 递归 ...