前端好用API之Fullscreen
前情
在前端开发需求中，特别网页有视频需求时，需要做视频全屏功能，或者在某些可视化大屏项目也要做全屏。
Fullscreen介绍
让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用
调用方式：
/**
* 指定元素进入全屏模式
* @param {element} element
*/
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
相关API：
| document.exitFullscreen() | 让当前文档退出全屏模式，跟requestFullscreen一样要做好兼容前辍处理 |
|---|
相关属性：
| document.fullscreenElement | 被展示为全屏模式的element |
|---|---|
| document.fullscreenEnabled | 表示全屏模式是否可用 |
相关事件：
| element.onfullscreenchange | 指定元素全屏事件发生时，事件发送到该元素，表明该元素进入或退出全屏模式 |
|---|---|
| element.onfullscreenerror | 指定元素变全屏模式时出现错误，该事件将被发送到指定的元素上 |
浏览器提供的一些css控制规则
/* element为当前全屏的元素 */
element:-webkit-full-screen {
/* properties */
}
element:-moz-fullscreen {
/* properties */
}
element:-ms-fullscreen {
/* properties */
}
element:fullscreen {
/* properties */
}
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fullscreen测试</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
.fullscrenn_element{
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
color: #fff;
}
.fullscrenn_element:-webkit-full-screen{
background-color: red;
}
.fullscrenn_element:-moz-fullscreen{
background-color: red;
}
.fullscrenn_element:-ms-fullscreen{
background-color: red;
}
.fullscrenn_element:fullscreen{
background-color: red;
}
</style>
</head>
<body>
<div class="fullscrenn_element">全屏</div>
<script type="text/javascript">
var elementWrap = document.querySelector('.fullscrenn_element');
if (fullscreenEnabled()) {
init();
} else {
console.log('全屏模式不可用！');
}
function init() {
addEvent(elementWrap);
elementWrap.addEventListener('click', function() {
console.log('--当前全屏元素--：', document.fullscreenElement);
if (document.fullscreenElement) {
cancelFullScreen(elementWrap);
} else {
launchFullScreen(elementWrap)
}
}, false);
}
/*
* 检测当前是否支持全屏
*/
function fullscreenEnabled() {
return document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullscreenEnabled ||
document.msFullscreenEnabled
}
/**
* 指定元素进入全屏模式
* @param {element} element
*/
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/**
* 退出全屏模式
*/
function cancelFullScreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullscreen) {
document.mozExitFullscreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
/*
* 绑定全屏事件
* param {Element} element
*/
function addEvent(element) {
var fullscreenchangeEvt = '';
if ('onwebkitfullscreenchange' in element) {
fullscreenchangeEvt = 'webkitfullscreenchange';
}
if ('onmozfullscreenchange' in element) {
fullscreenchangeEvt = 'mozfullscreenchange';
}
if ('onmsfullscreenchange' in element) {
fullscreenchangeEvt = 'msfullscreenchange';
}
if ('onfullscreenchange' in element) {
fullscreenchangeEvt = 'fullscreenchange';
}
element.addEventListener(fullscreenchangeEvt, function(e) {
console.log('--fullscreenchange--:', fullscreenchangeEvt, e);
}, false);
}
</script>
</body>
</html>
前端好用API之Fullscreen的更多相关文章
- HTML5 中fullscreen 中的几个API和fullscreen欺骗
// 转自:https://my.oschina.net/jackyrong/blog/114086 HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时 ...
- 前端调用百度API
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 那些前端二进制操作API
一直以来,前端的工作主要涉及的是字符串操作,而对二进制的数据接触较少.但是这种需求却一直存在着,尤其是HTML5之后,随着web应用越来越复杂,File,Blob,TypedArray这些API的出现 ...
- 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明
我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...
- 前端好用API之getBoundingClientRect
前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect() ...
- 前后端分离开发之前端自己的API（DB）---- （1）
Creating demo APIs for Front-End Developer 心理准备 Tool-1 开发工具/编辑器:Visual Studio Code , 即 VSCode官网: htt ...
- 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。
关于 ES6: 需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.a ...
- JavaScript前端最全API集锦
一.节点1.1 节点属性Node.nodeName //返回节点名称,只读Node.nodeType //返回节点类型的常数值,只读Node.nodeValue //返回Text或Comme ...
- ABP .Net Core API和Angular前端APP集成部署
前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...
随机推荐
- Solution -「LOCAL」画画图
\(\mathcal{Description}\) OurTeam. 给定一棵 \(n\) 个点的树形随机的带边权树,求所有含奇数条边的路径中位数之和.树形生成方式为随机取不连通两点连边直到全 ...
- 『无为则无心』Python基础 — 44、对文件和文件夹的操作
目录 1.os模块介绍 2.查看os模块相关文档 3.os模块常用方法 (1)文件重命名 (2)删除文件 (3)创建文件夹 (4)删除文件夹 (5)获取当前目录 (6)改变默认目录 (7)获取目录列表 ...
- JNDI漏洞利用探索
最近学习了师傅寻找的一些JNDI漏洞的利用链受益匪浅,自己也尝试关于JNDI漏洞利用做一些挖掘,目前JNDI在利用过程我想到了两个问题. 测试每一个JNDI Bypass 利用链都需要手动更改URL很 ...
- html页面预览pdf文件使用插件pdfh5.js
html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...
- [数分笔记]Dedekind切割定理的证明
1.定理内容 Dedekind切割定理:设是实数集的一个切割,则或者有最大数,或者有最小数. 2.证明过程 设是中所有有理数所构成的集合,是中所有有理数所构成的集合 从而构成一个有理数集的切割 有三种 ...
- [Unity] 在软件标题栏显示工作路径
(一)问题 项目开发中常会有开多个分支,同时启动多个 Unity 程序的情况,来回切换的时候就容易混淆,有时候还需要用 Show In Explorer 或者其他标志来确认当前使用的是哪个分支. 于是 ...
- Anaconda：指令 安装、更新、卸载库
学习总结自:如何使用anaconda安装或更新自己想要的库_xiexu911的博客-CSDN博客_anaconda 安装库 打开Anaconda Prompt后,输入指令及响应 conda list: ...
- k8s 中 nfs作为存储的三种方式
1.安装nfs服务.直接给命令 yum install nfs-utils vim /etc/exports /data/k8s/ 172.16.1.0/24(sync,rw,no_root_squa ...
- Vue-router路由判断页面是否登录,未登录跳转到登录页面
在index.js中 //定义路由 const router = new Router({ routes, strict: process.env.NODE_ENV !== 'production', ...
- linux文本处理grep
grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...