前端好用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一 ...
随机推荐
- 垃圾陷阱 && [NOIP2014 提高组] 飞扬的小鸟
#include<bits/stdc++.h> using namespace std; int d,n,dp[1010]; struct node{int t,f,h;} a[1010] ...
- Solution -「多校联训」小卖部
\(\mathcal{Description}\) Link. 有 \(n\) 种物品,第 \(i\) 中有 \(a_i\) 个,单价为 \(b_i\).共 \(q\) 次询问,每次查询用不超 ...
- InfluxDB 2.x Open Source Time Series Database
1. 说明 目前,大家普遍还在采用 InfluxDB 1.x 的版本,官方2.x的版本已经发布一段时间了, 其主推flux语言且自带前端炫酷图表. 2. 官方网站 https://www.influx ...
- 天啦，从Mongo到ClickHouse我到底经历了什么？
前言: 在实现前端监控系统的最初,使用了 Mongo 作为日志数据存储库.文档型存储,在日志字段扩展和收缩上都能非常方便.天生的 JSON 格式和 NodeJs 配合也非常贴合.就这样度过了几个月的蜜 ...
- 使用java程序完成大量文件目录拷贝工作
java程序完成目录拷贝工作 背景描述:我目录有140多个,每个目录里面都有一个src目录.我现在想要所有的src目录移动到同一个目录中. package com.util.cp; import ja ...
- spring中容器和对象的创建流程
容器和对象的创建流程 1.先创建容器 2.加载配置文件,封装成BeanDefinition 3.调用执行BeanFactoryPostProcessor 准备工作: 准备BeanPostProcess ...
- PentestBOX教程
0x01 Pentest BOX Pentest Box:渗透测试盒子,是一款Windows平台下预配置的便携式开源渗透测试环境,而它也是著名黑客Kapustkiy常用的工具之一.这里集成的大都是Li ...
- Clickhouse 分布式表&本地表 &ClickHouse实现时序数据管理和挖掘
一.CK 分布式表和本地表 (1)CK是一个纯列式存储的数据库,一个列就是硬盘上的一个或多个文件(多个分区有多个文件),关于列式存储这里就不展开了,总之列存对于分析来讲好处更大,因为每个列单独存储,所 ...
- 「Excel实用技巧」拿下这个报表工具，轻松给报表加水印！
水印报表是什么?怎么给excel表格加水印? 许多时候,为了防止报表被盗.保护信息安全和保护版权,采用水印能够有效实现该需求.水印是为了防止报表被盗.进行真伪鉴别.版权保护等,而在报表中添加半透明的图 ...
- 【C# 基础概念】抽象类、密封类及类成员
使用 abstract 关键字可以创建不完整且必须在派生类中实现的类和 class 成员. 使用 sealed 关键字可以防止继承以前标记为 virtual 的类或某些类成员. abstract修饰符 ...