一、html和js实现全屏和退出全屏

代码如下：

<!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>Document</title>
</head><body><button οnclick="fullscreen()">全屏</button><button οnclick="outfullscreen()">退出全屏</button><script>// 全屏function fullscreen() {var element = document.getElementsByTagName("body")[0];console.log(element);var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;console.log(element.requestFullScreen);if (requestMethod) {requestMethod.call(element);} else if (typeof window.ActiveXObject !== "undefined") {var wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}// 退出全屏function outfullscreen() {var el = document;var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||el.mozCancelFullScreen || el.exitFullScreen;if (typeof cfs != "undefined" && cfs) {cfs.call(el);} else if (typeof window.ActiveXObject != "undefined") {var wscript = new ActiveXObject("WScript.Shell");if (wscript != null) {wscript.SendKeys("{F11}");}}}</script>
</body></html>

二、在react中使用实现全屏和退出全屏

<p onClick={() => launchFullScreen(document.documentElement)}>全屏模式</p>
<b onClick={() => exitFullscreen(document.documentElement)}>退出全屏</b>

// 全屏function launchFullScreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}}//退出全屏function exitFullscreen() {console.log(1111);if (document.exitFullscreen) {window.document.exitFullscreen();} else if (document.mozExitFullScreen) {window.document.mozExitFullScreen();} else if (document.webkitExitFullscreen) {window.document.webkitExitFullscreen();}}

实现全屏和退出全屏效果

如何实现全屏和退出全屏？相关推荐

video 满屏显示_HTML5 video进入全屏和退出全屏的实现方法
当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法 // Webkit element.webkitReque ...
[html] HTML5如何监听video的全屏和退出全屏？
[html] HTML5如何监听video的全屏和退出全屏? 监听fullscreenchange事件document.addEventListener('fullscreenchange', (ev ...
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
使用JavaScript使浏览器进入全屏或退出全屏
使用JavaScript使浏览器进入全屏或退出全屏首先使用fullscreenElement判断浏览器是否在全屏状态. 如果是:则调用exitFullscreen函数退出全屏,否则调用request ...
js实现全屏和退出全屏功能
主要是全屏和退出全屏事件,以及相应的操作(采用window.onresize监测) $(function(){//全屏$("#fullScreen").on("click ...
JS实现全屏和退出全屏
JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...
网页怎么退出全屏,网页退出全屏有哪些快捷键？
网页怎么退出全屏,网页退出全屏有哪些快捷键? 网页怎么退出全屏,网页退出全屏有哪些快捷键? 1.浏览器一般右上角都有个双重小框框即是还原按钮,图标是两个小口. 你点下就不是全屏啦,或者你在浏览器的边框 ...
vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...
js全屏事件,进入全屏，退出全屏操作
上面是全面化方案,下面还有个简单的实现功能 1.进入全屏 function launchFullscreen(element) {if (element.requestFullscreen) {ele ...

如何实现全屏和退出全屏？

目录标题

一、html和js实现全屏和退出全屏

二、在react中使用实现全屏和退出全屏

如何实现全屏和退出全屏？相关推荐

最新文章

热门文章