js控制浏览器全屏显示

window.navigator.userAgent.indexOf(‘MSIE’)<0为true时，表示浏览器支持进入全屏
还需做兼容性判断

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>是否全屏</title><style>*{margin: 0;padding: 0;}body{background-color: rgba(0,0,0,0.75);}</style>
</head>
<body>
<button onclick="fullScreen('half')">进入全屏</button>
<button onclick="fullScreen('full')">退出全屏</button>
<script>function fullScreen(state){if(window.navigator.userAgent.indexOf('MSIE')<0){//console.log(window.navigator.userAgent);//console.log(window.navigator.userAgent.indexOf('MSIE'));console.log('显示能进入或者退出全屏的');}//console.log(document.body.requestFullscreen);let main = document.bodyif (state==='full') {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}} else if(state==='half'){if (main.requestFullscreen) {main.requestFullscreen()} else if (main.mozRequestFullScreen) {main.mozRequestFullScreen()} else if (main.webkitRequestFullScreen) {main.webkitRequestFullScreen()} else if (main.msRequestFullscreen) {main.msRequestFullscreen()}}}
</script>
</body>
</html>

本文参考iview-admin

js控制浏览器全屏显示相关推荐

html 设置浏览器全屏显示,JavaScript控制浏览器全屏显示简单示例
本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: www.jb51.net JS全屏显示全屏显示退出全屏 // 判断各种浏览器,找到正确的方法 functio ...
前端实现控制浏览器全屏显示
通过原生JS方式实现 document.documentElement.requestFullscreen() // 开启全屏 document.exitFullscreen() // 关闭全屏通过 ...
js控制浏览器全屏踩坑记录
需求点击以下按钮后,页面进入全屏. 进入全屏后,按钮样式改变为恢复非全屏时,按钮自动恢复. 难点需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全 ...
原声js控制浏览器全屏或者退出全屏
开启全屏 if (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen(); ...
JS 控制浏览器全屏和取消全屏
注意:这里没考虑IE低版本问题代码: //全屏 function fullScreen(){var el = document.documentElement;var request_full_sc ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
JavaScript 控制浏览器全屏展示
JavaScript 控制浏览器全屏展示前言一.全屏区分二.HTML Dom 全屏模式展开全屏退出全屏三.兼容 IE 10 及以下方式 DEMO 总结前言浏览器全屏功能解释一.全屏 ...
html控制浏览器全屏,JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件_javascript技巧...
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能,其中需求是需要全屏展示,正好HTML 5中的full screen满足需求,在此记录下. HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ...

js控制浏览器全屏显示

js控制浏览器全屏显示相关推荐

最新文章

热门文章