前端好用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一 ...
随机推荐
- suse 12 双网卡bonding模式
文章目录 工欲善其事,必先配静态ip 网卡bonding eth0 eth1 192.168.70.52 192.168.70.55 工欲善其事,必先配静态ip 重要的事情说三遍 修改配置之前,先备份 ...
- jenkins持续集成go应用
上文讲到使用supervisor管理我们的终端应用,这次讲一下使用jenkins持续集成 下面分别讲一下pipeline里每一个段落的含义 agent any 使用任意节点构建 parameters ...
- showdoc升级问题，showdoc错误日志
showdoc自带错误日志.目录位于网站根目录的server/Application/Runtime/Logs/Api目录下,如果没有任何内容需要添加可写权限. showdoc升级后,建议把MySQL ...
- Devops 开发运维高级篇之容器管理
Devops 开发运维高级篇之容器管理 安装docker Dockerfile镜像脚本入门制作 Harbor镜像仓库安装及使用 不过多解释docker直接秀基操 安装docker:(jenkins服务 ...
- 『无为则无心』Python面向对象 — 57、类属性和实例属性
目录 1.类属性 (1)类属性的访问 (2)修改类属性 2.类属性和实例属性区别 1.类属性 (1)类属性的访问 类属性就是 类对象 所拥有的属性,它被 该类的所有实例对象 所共有. 类属性可以使用 ...
- NET命令入侵实例
实验目的 了解NET入侵的过程 掌握NET命令的使用方法和它的参数搭配 实验内容 NET命令的使用方法和它的参数搭配 实验环境描述 XP作为客户端,Windows server 2003作为远程服务器 ...
- 可视化BI工具如何选择？这2款省心省时又省力！
随着大数据时代的到来,越来越多企业开始意识到数据的重要性.商业智能BI工具也如雨后春笋般不断涌现,如何选择BI工具倒成了企业急需解决的难题.BI工具的选择要具体问题具体分析,但大部分企业在选择BI工 ...
- Keepalived配置重载（reload）实现方法
一.前言 Keepalived运行过程中,可能存在更改配置的需求,例如修改virtual_ipaddress,virtual_router_id,priority等参数.在keepalived不重启, ...
- 基于隐私保护技术的DNS通信协议介绍
本文提出了一种基于用户数据报协议的DNS传输中用户隐私保护的加密方法:DNSDEA.该方法采用PKI加密体系与DNS协议相融合,不仅解决了域名隐私保护问题,而且与传统DNS体系相兼容,保持了DNS系统 ...
- Hadoop - MapReduce学习笔记（详细）
第1章 MapReduce概述 定义:是一个分布式运算程序的编程框架 优缺点:易于编程.良好的扩展性.高容错性.适合PB级以上数据的离线处理 核心思想:MapReduce 编程模型只能包含一个Map ...