概述

意外的发现一个网页有一个按钮能使网页全屏，查了下代码发现是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让页面全屏的更多相关文章

  1. 学习笔记： js插件 —— fullPage.js （页面全屏滚动）

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

  2. js设置页面全屏

    html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...

  3. 如何在手机上实现 H5 页面全屏显示

    如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...

  4. 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  5. HTML页面全屏/退出全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  7. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

  8. 页面全屏显示JS代码

    1.直接在页面加载时就全屏. <body onload="window.open(document.location,'big','fullscreen=yes'):window.cl ...

  9. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

随机推荐

  1. Python语言学习之C++调用python

    C++调用python 在C/C++中嵌入Python,可以使用Python提供的强大功能,通过嵌入Python可以替代动态链接库形式的接口,这样可以方便地根据需要修改脚本代码,而不用重新编译链接二进 ...

  2. typescript如何判断实例是否实现了接口？

    ·不能用instanceof,因为运行时不存在Interface ·TS 中判断是否实现接口的核心原则是基于结构而不是基于名称的.即鸭子类型判断. ·实现: interface A{ discrimi ...

  3. KNN Python实现

    KNN Python实现 ''' k近邻(kNN)算法的工作机制比较简单,根据某种距离测度找出距离给定待测样本距离最小的k个训练样本,根据k个训练样本进行预测. 分类问题:k个点中出现频率最高的类别作 ...

  4. cnblog测试

    文字测试  图片测试

  5. python基础之Day23

    1.封装 什么是? 封:明确地把属性隐藏起来 ,对外隐藏,对内开放 申请名称空间,往里面装入一系列名字 /属性(类比 类 和对象   只是装的概念) 为什么要用? __init__往对象里丢属性 封装 ...

  6. db2数据库备份及恢复

    导出 1. 连接数据库,命令如下: db2 connect to db_name user user_name using password db_name 是指数据库的名字, user_name 是 ...

  7. python-directory

    #!/usr/bin/python # --*-- coding: utf-8 --*-- directory={ "张三":16, "李四":46, &quo ...

  8. SpringBoot放置在static下面的静态页面无法访问

    最近写项目本来写的好好的,突然static的静态页面访问不了了. 于是我各种上网查资料,看大佬的解决方案,还是没有解决. 直到发现了这篇文章 https://blog.csdn.net/cmqwan/ ...

  9. STS中db.properties配置文件

    db.name=root db.password=root db.url=jdbc:mysql://localhost:3306/day13?useUnicode=true&character ...

  10. https多网站1个IP多个SSL证书的Apache设置办法

    这些天接触了解SSL证书后,写了一篇<申请免费的SSL证书,开通https网站>博文,其中简单记录了Apache的设置,后来又涉及到多个域名.泛域名解析.通配符SSL证书.单服务器/多服务 ...