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 ...
随机推荐
- 什么是openshift
Openshift是一个开源的容器云平台,底层基于当前容器的事实标准编排系统Kubernetes和docker引擎,企业可以基于此平台搭建内部Paas平台,贯穿CI/CD流程,提高企业IT效率,拥抱D ...
- foreach引用坑
先看下面代码 $arr1 = [1, 2]; foreach($arr1 as $key => $value) { $value = $value + 1; } var_dump($key, $ ...
- [洛谷P5329][SNOI2019]字符串
题目大意:给一个长度为$n$的字符串$s$,字符串$p_i$为字符串$s$去掉第$i$个字符后形成的字符串.请给所有字符串$p_i$排序(相同字符串按编号排序) 题解:先去掉所有连续相同字符,因为它们 ...
- 查看线程CPU利用率
查看线程CPU利用率 方法1:利用ps命令查看对应的线程 1. ps -ef | grep 进程名称 2. ps -mp 进程ID -o THREAD,pid,tid,cmd,time,%cpu,%m ...
- 2.8_Database Interface ADO由来
OLE-DB,它无法广为流行,因为如下两点: 1.由于OLE-DB太底层化,使用上非常复杂,需要程序员拥有高潮的技巧. 2.OLEDB标准的API是C++API,只能供C++语言调用. 为了使得流行的 ...
- Asp.Net进阶/值类型与引用类型：复习
什么是值类型? 值类型: 就是非类类型,委托类型,接口类型,string类型的类型称为值类型. 引用类型类型:就是类类型,委托类型,接口类型,string类型称为引用类型. 值类型与引用类型的赋值问题 ...
- 5_PHP数组_3_数组处理函数及其应用_6_数组检索函数
以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 数组检索函数 1. array_keys() 函数 程序: <?php $interests[2] = &q ...
- UML回顾暨课程总结
本文作为OO的最后一次博客作业,主要回顾了第四单元的架构设计和本学期的心路历程. 本单元架构设计 UML1 第一次作业的主要内容是解析mdj格式输入,记录特定数据并支持针对类.属性和方法等的查询功 ...
- error C2338: You've instantiated std::aligned_storage<Len, Align> with an extended alignment (in other words, Align >
报的完整错误为: error C2338: You've instantiated std::aligned_storage<Len, Align> with an extended al ...
- require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...