H5中用js让页面全屏
概述
意外的发现一个网页有一个按钮能使网页全屏，查了下代码发现是H5的全屏api，于是就查了下资料，记录下来供以后开发时参考，相信对其他人也有用。
参考资料：
利用js如何做到让页面全屏和不全屏功能
Element.requestFullScreen() MDN
全屏API
H5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
需要注意的是：只有包含在顶层文档内部的标准HTML元素、<svg>元素和<math>元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>全屏不全屏</title>
</head>
<body>
<button id="fullScreen">全屏模式</button>
<button id="noFullScreen">取消全屏</button>
</body>
</html>
<script>
document.getElementById("fullScreen").onclick=function(){
if(document.documentElement.RequestFullScreen){
document.documentElement.RequestFullScreen();
}
//兼容火狐
console.log(document.documentElement.mozRequestFullScreen)
if(document.documentElement.mozRequestFullScreen){
document.documentElement.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if(document.documentElement.webkitRequestFullScreen){
document.documentElement.webkitRequestFullScreen();
}
//兼容IE,只能写msRequestFullscreen
if(document.documentElement.msRequestFullscreen){
document.documentElement.msRequestFullscreen();
}
}
document.getElementById("noFullScreen").onclick=function(){
if(document.exitFullScreen){
document.exitFullscreen()
}
//兼容火狐
console.log(document.mozExitFullScreen)
if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
//兼容谷歌等
if(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
//兼容IE
if(document.msExitFullscreen){
document.msExitFullscreen()
}
}
</script>
全屏事件
如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
示例如下：
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
全屏样式
全屏之后还可以选择性的调整样式，就和hover一样，如下所示：
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
H5中用js让页面全屏的更多相关文章
- 学习笔记： js插件 —— fullPage.js （页面全屏滚动）
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...
- 如何在手机上实现 H5 页面全屏显示
如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
- 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码
已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...
- HTML页面全屏/退出全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- js指定区域全屏
<html> <head> <title>js指定区域全屏</title> <style> ...
- 页面全屏显示JS代码
1.直接在页面加载时就全屏. <body onload="window.open(document.location,'big','fullscreen=yes'):window.cl ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
随机推荐
- kubernetes 常见问题整理
使用kubectl 命令是报错 报错: [root@k8s-master ~]# kubectl get pod The connection to the server localhost: was ...
- 使用gcc命令编译多个文件
使用g++命令直接一次性编译多个文件 这里以简单的HelloWorld程序为例,假设我们一共有三个文件:main.cpp,HelloWorld.cpp和HelloWorld.h. 其中HelloWor ...
- 图数据库-Neo4j使用
Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix) 为节点添加一个ID (:Movie ...
- python 机器学习
十分钟搞定pandas http://www.cnblogs.com/chaosimple/p/4153083.html dummies 哑变量,将变量重新编码,便于二分类,例如男.女,变为0,1等 ...
- 行盒(line box)垂直方向的属性详解：从font-size、line-height到vertical-align
视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...
- AJAX随笔1
[1] AJAX简介 > 全称: Asynchronous JavaScript And XML > 异步的JavaScript和XML > AJAX就是通过JavaSc ...
- OO第5-7次作业总结
前三次作业可以说是入门编程,随着课程的深入,这三次多线程作业使我们开始慢慢接触工程性的编程任务. 对比起1-3次作业,5-7次作业明显没有那么顺利了,之前在互测环节每次最多就一个BUG或者没有BUG, ...
- 一、PTA实验作业
一.PTA实验作业 1.题目1: 6-2 线性表元素的区间删除 2. 设计思路 定义i,j; 判断L,minD,maxD; while(i<l->Last) { 判断所有满足条件的数,de ...
- pycharm汉化（3.6版本）
step 1:下载pycharm汉化包 链接:https://pan.baidu.com/s/1htgcbZY 密码:8uia step 2:将pycharm安装目录下的lib文件夹内下的resou ...
- JS中的instanceof和typeof，以及特殊引用类型
1.instanceof是用于测试对象类型,通常格式为:a instanceof b,返回true或falise,表示为对象a是否是类型b的实例. typeof则是用于测试基本类型,包括undefin ...