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是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
随机推荐
- 微信小程序覆盖自定义组件样式
小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...
- mysql学习--1.事务
转载自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/3984001.html 四.事务的四大特性(ACID) 4.1.原子性(Atomicity) 原子性是指事务 ...
- How to Reset VW Steering Assist 1S1909144P with OBDSTAR X300 DP
Vehicle model:VW Polo 2015 (or other Audi, Seat, Skoda, VW with unit 1S1 909 144 P) Module:Control u ...
- vue中部分api解释 （$nextTick）
1:this.$nextTick(function(){ }) 传如的参数是一个函数 这个API主要是获取dom元素 为什么需要这个api,在vue框架开发中,更新dom是一个异步操作,如果更新完do ...
- EasyPR源码剖析（9）：字符识别
在上一篇文章的介绍中,我们已经通过相应的字符分割方法,将车牌区域进行分割,得到7个分割字符图块,接下来要做的就是将字符图块放入训练好的神经网络模型,通过模型来预测每个图块所表示的具体字符.神经网络的介 ...
- LVS的DR模式测试案例<仅个人记录>
初始概念 大家都知道LVS,是章文嵩博士创建的,所以首先推一下主站吧!http://zh.linuxvirtualserver.org/ LVS集群分为三层结构: 负载调度器(load balance ...
- 1. String可调用方法
class str(basestring): """ str(object='') -> string Return a nice string represent ...
- 博客三--tensorflow的队列及线程基本操作
连接我的开源中国账号:https://my.oschina.net/u/3770644/blog/3036960查询
- STS中db.properties配置文件
db.name=root db.password=root db.url=jdbc:mysql://localhost:3306/day13?useUnicode=true&character ...
- ArrayAdapter构造方法中的textViewResourseId
simple_list_item_1:每个列表项都是一个普通的textView simple_list_item_2:每个列表项都是一个普通的textView(字体略大) simple_list_it ...