HTML5全屏操作API
2024-09-26 01:06:16
一、定义: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>
最新文章
- QuickContactBadge去掉三角
- D:Balanced Lineup
- tp_link路由器 重新设置
- BZOJ 2818
- 【练习】手工生成awr报告
- lintcode:单词切分
- ios越狱开发第一次尝试记录
- 【Android - 进阶】之自定义视图浅析
- OWIN 为WebAPI
- MySQL show slave status命令参数
- iOSiOS开发之数据存储之NSKeyedArchiver
- zookeeper 配置文件conf目录下 zoo文件 配置详解
- Elasticsearch NEST 控制字段名称命名格式
- swift 学习- 22 -- 嵌套类型
- Python 面向对象5 多态
- AGC 027B.Garbage Collector(贪心)
- 简单的 FastDFS + Nginx 应用实例
- Python知识点整理,基础4 - 集合操作
- 解题:NOI 2010 航空管制
- 层层递进——宽度优先搜索(BFS)