HTML5全屏操作API
一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题
二、使用：
①基本：
- Node.RequestFullScreen（）开启全屏显示
- Node.CancelFullScreen（）关闭全屏显示
②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需要添加不同的私有前缀（在js中也有私有前缀，在方法属性之前加上即可，并且首字母需大写）
- webkit内核浏览器，如Chrome浏览器：以
webkitRequestFullScreen方法实现，谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法
- gecko内核浏览器，如火狐浏览器：以
mozRequestFullScreen方法实现。
- Trident内核浏览器，如IE浏览器：使用IE时，最后的screen的s为小写，也即ms
RequestFullscreen，否则无效
<script>
// 将浏览器前缀兼容封装成函数
function toFullVideo() {
if (videoDom.requestFullscreen) {
return videoDom.requestFullScreen();
} else if (videoDom.webkitRequestFullScreen) {
return videoDom.webkitRequestFullScreen();
} else if (videoDom.mozRequestFullScreen) {
return videoDom.mozRequestFullScreen();
} else {
return videoDom.msRequestFullscreen();
}
}
</script>
③页面全屏（页面文档全屏）
document.documentElement.webkitRequestFullScreen()
④取消页面全屏（跟元素没有关系）
document.webkitCancelFullScreen;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5全屏操作</title>
<style>
.box {
width: 400px;
height: 400px;
background: pink;
}
</style>
</head> <body>
<div class="box"></div>
<button class="btn1">全屏显示</button>
<button class="btn2">取消全屏</button>
<script>
document.querySelector(".btn1").onclick = function () {
document.documentElement.webkitRequestFullScreen();
};
document.querySelector(".btn2").onclick = function () {
document.webkitCancelFullScreen();
};
</script>
</body>
</html>
HTML5全屏操作API的更多相关文章
- HTML5全屏(Fullscreen)API详细介绍
// 整个页面 onclick= launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
- How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- HTML5全屏背景视频与 CSS 和 JS（插件或库）
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 全屏化操作功能
由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...
随机推荐
- （三）pdf的构成之文件头综述
引自:https://blog.csdn.net/steve_cui/article/details/81981943 一般情况下,文件头,即,PDF文件的第一行,它用来定义PDF的版本,从而确定该P ...
- visual studio code 命令行创建发布一个项目
安装vs core 打开按ctrl+~键打开终端 输入dir看看有什么文件,输入md Test 创建一个文件夹,选择文件后创建一个项目 输入dotnet可以查看信息 执行dotnet --help或者 ...
- Hadoop2.8.4集群配置
建hadoop用户 #添加用户hadoop adduser hadoop 这个过程中需要输入密码两次 Enter new password: Retype new password: passwd: ...
- git 学习笔记 ---撤销修改
自然,你是不会犯错的.不过现在是凌晨两点,你正在赶一份工作报告,你在readme.txt中添加了一行: $ cat readme.txt Git is a distributed version co ...
- Docker3-Dockerfile创建镜像的方法（推荐docker file这种方法）
一.镜像制作的方法 1.本地导入导出镜像 请参考:Docker 架构原理及简单使用 导出:docker save nginx >/tmp/nginx.tar.gz 导入:docker load ...
- Zookeeper学习笔记（三）——java客户端代码操作
Zookeeper客户端java代码操作 上篇博客记录了shell命令操作zookeeper集群的方式,这次尝试采用java代码来操作.通过查阅API,发现并不困难. 1. 首先获得客户端与服务器的连 ...
- linux BufferedImage.createGraphics()卡住不动
项目应用服务器tomcat7,在开发(windows).测试环境(linux 64bit)均正常.在生产环境(linux 64bit)一直启动不起来,也没有报错. 最终定位问题:执行到buffered ...
- jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据
//easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行://注意datagrid中需要配置idField属性,一般为数据的主键 $.ajax({ type: 'GET', ...
- Unity - Profiler参数详解
CPU Usage ● GC Alloc - 记录了游戏运行时代码产生的堆内存分配.这会导致ManagedHeap增大,加速GC的到来.我们要尽可能避免不必要的堆内存分配,同时注意:1 ...
- Flutter：教你用CustomPaint画一个自定义的CircleProgressBar
https://www.jianshu.com/p/2ea01ae02ffe Flutter:教你用CustomPaint画一个自定义的CircleProgressBar paint_page.dar ...