网页全屏显示以及退出全屏，包括单个元素全屏显示

在一些场景中我们希望网页能够全屏显示，这样可展示的区域更大，也就是隐藏浏览器的地址栏和页签栏，上代码

为了方便调用直接进行了封装，同时也做了兼容性处理，（如果你觉得我代码写的垃圾让你不知道该怎么调，那你就看最后面有调用说明代码）

 // 判断是否处于全屏显示export function isFullScreen() {if (document.fullscreen) {return true;} else if (document.mozFullScreen) {return true;} else if (document.webkitIsFullScreen) {return true;} else if (document.msFullscreenElement) {return true;} else if (window.fullScreen) {return true;} return false;}// 浏览器全屏显示// 启动全屏!// launchFullScreen(document.documentElement); // 整个网页// launchFullScreen(document.getElementById("videoElement")); // 某个页面元素export function launchFullscreen(element) {if(isFullScreen()){// 如果用户在全屏模式下测退出全屏exitFullscreen()return false}if (element.requestFullscreen) {element.requestFullscreen();return true} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();return true} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();return true} else if (element.msRequestFullscreen) {element.msRequestFullscreen();return true}}// 退出全屏export function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}

使用的时候只要引入 launchFullscreen 就可以了，该方法调用结果：如果当前处于全屏状态就退出全屏，如果非全屏状态就进入全屏；废话有点多了，上代码

 import {launchFullscreen} from '... ...js'launchFullScreen(document.documentElement); // 整个网页launchFullScreen(document.getElementById("videoElement")); // 某个元素

到这里应该就ok了，其它两个辅助方法你也可以自己选择调用

找有bug的代码，你就关注老表，专业写bug20年，嘿嘿，点赞

网页全屏显示以及退出全屏，包括单个元素全屏显示相关推荐

html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
html元素全屏右键显示覆盖,HTML表单元素覆盖样式元素问题及其补救之道
HTML表单元素覆盖样式元素问题及其补救之道更新时间:2006年07月27日 00:00:00 作者: 在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子 ...
js学习-操作元素案例-分时显示不同图片不同问候语
js学习-操作元素案例-分时显示不同图片不同问候语 // 操作元素案例 // 分时显示不同图片,不同问候语// 上午7-11 中午12-13 下午14-18 晚上18-22![请添加图片描述](htt ...
JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小订阅全屏显示 ---------------------- ...
QT中关于窗口全屏显示与退出全屏的实现
近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...
html中iframe全屏显示,如何让iframe中的元素全屏
最近项目中iframe让人恶心,iframe只要一出现,写的正常代码就容易出现各种bug,比如iframe中的元素不能document.getElementBy...正常获取,比如iframe中的元素 ...
海康威视实现单个监控全屏（退出全屏），其他监控隐藏
1.核心思想 JS_SetWindowControlCallback 设置的消息回调中监听窗口全屏事件监听到窗口全屏事件时调 JS_HideWnd 插件窗口隐藏接口对除接收到全屏事件的插件窗口外的其 ...
怎么网站服务器退出全屏,远程桌面退出全屏/不能全屏/全屏切换的技巧
远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如 ...
html5老是自动退出全屏,HTML5--浏览器全屏操作、退出全屏、是否全屏
Title /*全屏操作的主要方法和属性 * 1.requestFullScreen():开启全屏显示 * 不同浏览器需要添加不同的前缀 * chrome:webkit firefox:moz ie: ...

网页全屏显示以及退出全屏，包括单个元素全屏显示

在一些场景中我们希望网页能够全屏显示，这样可展示的区域更大，也就是隐藏浏览器的地址栏和页签栏，上代码

到这里应该就ok了，其它两个辅助方法你也可以自己选择调用

网页全屏显示以及退出全屏，包括单个元素全屏显示相关推荐

最新文章

热门文章