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 ...
随机推荐
- 使用二进制方式安装K8S时使用kubectl命令报错：The connection to the server localhost:8080 was refused - did you specify the right host or port?
解决思路: kubectl 默认从 ~/.kube/config 配置文件获取访问 kube-apiserver 地址.证书.用户名等信息,如果没有配置该文件,或者该文件个别参数配置出错,执行命令时出 ...
- Spring Boot 五种热部署方式
[推荐]2019 Java 开发者跳槽指南.pdf(吐血整理)>>> 1.模板热部署 在SpringBoot中,模板引擎的页面默认是开启缓存的,如果修改了页面的内容,则刷新页面是得不 ...
- C#代码常用技巧
1.拼sql语句时,list中元素加单引号并以逗号分开:string.Join(",",list.Select(r=>"'"+r+"'" ...
- Linux中su和sudo的用法整理
一.为什么会有su和sudo命令? 主要是因为在实际工作当中需要在Linux不同用户之间进行切换.root用户权限最高很多时候需要root用户才能执行一些关键命令.所以需要临时切换为root用户.工作 ...
- python超链接抓取工具
python实现自动抓取某站点内所有超链接 (仅供学习使用) 代码部分 #!/usr/bin/python import requests import time import re import s ...
- MongoDB 4.2.1 安装失败，提示 verify that you have sufficient privileges to start system services 解决
官网下载地址:https://www.mongodb.com/download-center/community 问题: 解决:直接安装在根目录 测试:
- Microsoft Compiled HTML Help / Uncompiled .chm File XML External Entity
[+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source: http://hyp3 ...
- （Linux基础学习）第八章：命令行历史,history
第1节:命令行历史简介保存你输入的命令历史.可以用它来重复执行命令登录shell时,会读取命令历史文件中记录下的命令~/.bash_history登录进shell后新执行的命令只会记录在缓存中:这些命 ...
- 阿里巴巴开源性能监控神器Arthas jvm
原文:https://www.cnblogs.com/testfan2019/p/11038791.html 如果问性能测试中最难的是哪部分,相信很多人会说“性能调优”.确实是这样,性能调优是一个非常 ...
- 使用 create-react-app 快速构建 React 开发环境
在终端执行以下命令创建项目: 1.指定创建的项目位置(这里以桌面为例) cd Desktop 2.创建 React 项目 npx create-react-app my-app 3.进入项目并启动 c ...