【前端】【H5 API】实现全屏显示功能



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>萌狼蓝天 伴姬一生</title>

</head>

<body>

    <div>

        <img src="./source/img/dog.jpg" height="300" alt="">

        <button id="full">全屏显示</button>

        <button id="cancelFull">取消全屏</button>

        <button id="isFull">是否全屏</button>

        <p id="tip" style="color:blue"></p>

    </div>

    <script>

        //全屏显示

        var div = document.querySelector('div');

        document.querySelector('#full').onclick = function () {

            if (div.requestFullscreen) {

                div.requestFullscreen(); // 正常浏览器

            } else if (div.webkitRequestFullScreen) {

                div.webkitRequestFullScreen(); // webkit

            } else if (div.mozRequestFullScreen) {

                div.mozRequestFullScreen(); //早期火狐浏览器

            } else if (div.oRequestFullScreen) {

                div.oRequestFullScreen(); //早期Opera浏览器

            } else if (div.msRequestFullscreen) {

                div.msRequestFullscreen(); //早期IE浏览器

            } else {

                alert('暂不支持在您的浏览器中全屏');

            }

        };

        //取消全屏显示

        document.querySelector('#cancelFull').onclick = function () {

            if (document.exitFullscreen) {

                document.exitFullscreen(); // 正常浏览器

            } else if (document.webkitCancelFullScreen) {

                document.webkitCancelFullScreen(); // webkit

            } else if (document.mozCancelFullScreen) {

                document.mozCancelFullScreen(); //早期火狐浏览器

            } else if (document.oCancelFullScreen) {

                document.oCancelFullScreen(); //早期Opera浏览器

            } else if (document.msCancelFullscreen) {

                document.msCancelFullscreen(); //早期IE浏览器

            } else {

                alert('暂不支持在您的浏览器中全屏');

            }

            //可以用document，也可以用上方设置的变量 div

        };

        //检测当前是否处于全屏状态

        document.querySelector('#isFull').onclick = function () {

            // alert(document.webkitIsFullScreen); // webkit

            // 使用上面的弹窗方式。如果是处于全屏状态，会自动退出

            document.getElementById('tip').innerHTML=document.webkitIsFullScreen;

        };

    </script>

</body>

</html>

各类浏览器全屏的方法

一般浏览器

使用requestFullscreen()和exitFullscreen()来实现

早期版本Chrome浏览器

基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现。

早期版本IE浏览器

基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msExitFullscreen()来实现，注意方法里的screen的s为小写形式。

早期版本火狐浏览器

基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现。

早期版本Opera浏览器

Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现。

【前端】【H5 API】实现全屏显示功能的更多相关文章

h5 app 设置全屏
h5 app的全屏和沉浸式状态栏是不一样的全屏模式常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏.webview高度全屏了,状态栏没有了.写法: 终端支持:没有终端类型限 ...
h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
H5微信播放全屏问题
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题解决办法:给vi ...
iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法
1. 在layer弹窗组件中如果使用了flash播放器,全屏是正常的但若使用了HTML5的播放器,全屏失效举个栗子 <!DOCTYPE html> <html> < ...
Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
H5视频播放自动全屏，暂停退出全屏等功能
html5视频播放自动全屏,暂停退出全屏等功能在参考了html5 video fullScreen全屏实现方式及司徒正美的书<javascript框架设计>287页相关代码后,在Safa ...
全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
H5中用js让页面全屏
概述意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
第89天：HTML5中访问历史、全屏和网页存储API
一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...

随机推荐

高通pmic voter机制
前不久在高通 SDM450 平台接触了 voter 机制(投票机制).最近终于得空,结合一个问题简单研究了一下.现将研究流程简单记录一下,由于时间有限,所以是实用为目的,没有做详细的分析,不过结合着这 ...
Linux 进程调度之schdule主调度器
考虑到文章篇幅,在这里我只讨论普通进程,其调度算法采用的是CFS(完全公平)调度算法. 至于CFS调度算法的实现后面后专门写一篇文章,这里只要记住调度时选择一个优先级最高的任务执行一.调度单位简介 ...
数据库日常实操优质文章分享（含Oracle、MySQL等） | 2023年2月刊
本文为大家整理了墨天轮数据社区2023年2月发布的优质技术文章,主题涵盖Oracle.MySQL.PostgreSQL等数据库的环境搭建.故障处理等日常实践操作,以及概念梳理.常用脚本等总结记录,分享 ...
iOS长按手势列表拖拽功能实现
项目开发中遇到拖拽功能的需求,具体要求是在编辑状态下,首页底部菜单项可以拖动位置,便于位置切换.遇到问题后的初步想法是添加拖拽手势,拖拽到某个位置,判断拖拽cell的中心点是否在另一个cell内,这样 ...
.NET 工控网关轻量级组态软件
前言 C# 工控网关 + 轻量级组态软件. 项目介绍 SharpSCADA 是一个开源项目,提供灵活且强大的解决方案,以满足工业自动化和监控的需求. 作为一个轻量级的工业控制网关和组态软件,Sharp ...
云原生周刊：Kubernetes v1.28 正式发布 | 2023.8.21
开源项目推荐 kurt 一个 Kubernetes 插件,可提供 Kubernetes 集群中重启内容的上下文信息. Kubean Kubean 是一个基于 kubespray 的 Kubernete ...
C语言之输入输出
标准库 IO 输入输出功能并非C语言的组成部分,ANSI标准定义了相关的库函数输入输出 <stdio.h> 流stream是与设备关联的数据的源或者目的地. 文本流:由文本行组成的序列 ...
Python-提高-1
阅读目录 1.GIL(全局解释器锁) 2.深拷贝.浅拷贝 3.私有化 4.import导入模块 5.再议封装.继承.多态一.GIL(全局解释器锁) GIL面试题如下描述Python GIL的概念 ...
C语言数据类型和变量
目录 1.数据类型介绍 1.1字符型 1.2整形 1.3浮点型 1.4布尔类型 1.5各种数据类型长度 1.5.1sizeof操作符 1.5.2数据类型长度 1.5.3 sizeof中表达式不计算 2 ...
TRLO: An Efficient LiDAR Odometry with 3D Dynamic Object Tracking and Removal
arxiv | 中科院联合国科大开源 TRLO:一种结合3D动态物体跟踪与移除的高效LiDAR里程计 [TRLO: An Efficient LiDAR Odometry with 3D Dynami ...