前端好用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一 ...
随机推荐
- [TJOI2013] 奖学金
代码: #include<bits/stdc++.h> using namespace std; long long n,c,ff,ans; long long suma[200010], ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- OpenHarmony移植案例与原理：startup子系统之syspara_lite系统属性部件
摘要:本文介绍下移植开发板时如何适配系统属性部件syspara_lite,并介绍下相关的运行机制原理. 本文分享自华为云社区<openharmony移植案例与原理 - startup子系统之sy ...
- Centos 7.6 使用 kubekey 部署 kubesphere v3.1.0
文章目录 主要功能 硬件要求 Kubernetes版本要求 配置主机之间的免密 安装所需依赖 下载KubeKey 创建Kubernetes集群以及KubeSphere kk命令使用方式 修改配置文件 ...
- c++ 动态内存 动态数组
动态内存-动态数组 习题12.23 //连接字符串到动态数组 char *c = new char[20](); char a[] = "hello "; char b[] = & ...
- 看SparkSql如何支撑企业数仓
企业级数仓架构设计与选型的时候需要从开发的便利性.生态.解耦程度.性能. 安全这几个纬度思考.本文作者:惊帆 来自于数据平台 EMR 团队 前言 Apache Hive 经过多年的发展,目前基本已经成 ...
- 什么是ETCD及其应用场景
源自公众号:BiggerBoy 一.什么是etcd? etcd 发音为/ˈɛtsiːdiː/,名字的由来,"distributed etc directory.",意思是&qu ...
- 故障分析：网络闪断引发的ServiceStack.Redis死锁问题
背景说明 某天生产环境发生进程的活跃线程数过高的预警问题,且一天两个节点分别出现相同预警.此程序近一年没出现过此类预警,事出必有因,本文就记录下此次根因分析的过程. 监控看到的线程数变化情况: 初步的 ...
- KVM 虚机镜像操作, 扩容和压缩
KVM镜像操作 qemu-img命令 创建镜像 qemu-img create # 创建一个设备空间大小为10G的镜像 qemu-img create -f qcow2 centos7-guest.q ...
- Burp intruder暴力攻击web口令
实验目的 利用Burp intruder功能爆破出后台登陆密码admin. 实验原理 1)Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改,扫 ...