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是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
随机推荐
- 使用Snappy将html或者url转成PDF文件
这是一个操作简单的html文件或者url转PDF的php库 Github地址 https://github.com/KnpLabs/snappy 安装: $ composer require knpl ...
- 爬取qq号
import reimport urllib.requestimport osimport jsonimport sslfrom collections import deque #把爬去的数据保存到 ...
- 面试简单整理之spring、spring mvc
90.为什么要使用 spring? 解决企业应用开发的复杂性,IOC.aop 91.解释一下什么是 aop? 面向切面编程.... 92.解释一下什么是 ioc? 控制反转.. 93.spring 有 ...
- nova client和nova restfull api区别
1.nova client封装了获取认证 获取token等东西 2.nova client提供shell cli方式访问和import client 然后new client的方式访问 区别: 通过 ...
- WCF系列_WCF常用绑定选择
一.五种常用绑定常用绑定的传输协议以及编码格式 名称 传输协议 编码格式 互操作性 BasicHttpBinding HTTP/HTTPS Text,MTOM Yes NetTcpBinding TC ...
- Idea如果添加Maven模块
1.要创建一个和heaton-app同级的Maven模块,如果所示 2.点击下一步,添加ArtifactId,其中 groupId : 定义了项目属于哪个组,举个例子,如果你的公司是myc ...
- Python中的迭代器、生成器
from collections import Iterable, Iterator 1. 可迭代(iterable)对象 参考官网链接 class I: def __init__(self, v): ...
- HttpServerUtility常用方法
//HttpServerUtility是一个工具类,为了在后台处理请求方便获取到一些常用的类型,Asp.net将很多常用的东西封装到这里. // 获取服务器的计算机名称. public string ...
- C#动态设置webServer路径
using BD.SD_BJXYZY_PRO.WsbxService;using System;using System.Collections.Generic;using System.Linq;u ...
- union: git command
# switch one tag # warning: if do that, can't commit any change git clone $project_path git checkout ...