js点击成全屏，再点击或者ESC退出全屏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button id="bt" onclick="toggleFullScreen(event)">点我全屏</button>
<script type="text/javascript">document.onkeydown=function(e){e = e|| window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==122){document.getElementById('bt').onclick();e.preventDefault();e.stopPropagation();}}function FullScreen(el) {var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;if (!isFullscreen) {//进入全屏,多重短路表达式(el.requestFullscreen && el.requestFullscreen()) ||(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||(el.msRequestFullscreen && el.msRequestFullscreen());} else { //退出全屏,三目运算符document.exitFullscreen ? document.exitFullscreen() :document.mozCancelFullScreen ? document.mozCancelFullScreen() :document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';}}function toggleFullScreen(e) {var el = e.srcElement || e.target;//target兼容Firefoxel.innerHTML == '点我全屏' ? el.innerHTML = '退出全屏' : el.innerHTML = '点我全屏';FullScreen(el);}
</script></body>
</html>

js点击成全屏，再点击或者ESC退出全屏相关推荐

js设置长按esc退出全屏；拦截所有所有按键事件；全屏模式下拦截esc按键；javascript；chrome
转载请注明来源,谢谢实现长按esc退出全屏,全屏模式下拦截esc按键事件作者:theajack 浏览器的全屏api requestFullscreen 在全屏模式下会屏蔽掉对 esc 按键的监听, ...
监听ESC退出全屏事件
全屏时,监听不到ESC退出全屏事件时可以试试这个方法: // 绑定监听事件 fullListen() {let screen = document.getElementById("scree ...
前端vue实现全屏和按esc退出全屏功能
效果如下: 不多说,直接上代码如下,复制即可使用,注意图片位置修改即可: 1.vue页面中根据是否全屏判断当前显示图片或icon图标,isFullScren为true时表示全屏,默认值为false,并 ...
esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏
1.vue页面中根据是否全屏判断当前显示icon图标,isFull为true时表示全屏,默认值为false,并绑定click事件 2.click全屏事件 fullScreenEvent: functi ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
小程序视频自动全屏，播放结束后自动退出全屏
在onshow里面直接写全屏 this.videoContext = wx.createVideoContext('myVideo', this); this.videoContext.request ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
js控制页面全屏或退出全屏
主要用h5的 requestFullScreen方法效果可以达到摁F11实现全屏的效果 requestFullscreen方法实现全屏具体实现代码如下 <!DOCTYPE html> & ...

js点击成全屏，再点击或者ESC退出全屏

js点击成全屏，再点击或者ESC退出全屏相关推荐

最新文章

热门文章