web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

F11全屏功能和js全屏功能冲突解决方法

1063 ℃
           

功能介绍:右键菜单做了一个显示全屏和取消全屏功能,但是用了F11全屏后,js全屏取消不了,两种冲突了!下面介绍一下解决方法!

var isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17
window.onresize = function () {
    isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17
}
// 阻止F11键默认事件,用HTML5全屏API代替
window.addEventListener('keydown', function (e) {
    e = e || window.event
    if (e.keyCode===122 && !isFull) {
        e.preventDefault()
        enterFullScreen()
    }
})
// 打开浏览器全屏模式
function enterFullScreen () {
  let el = document.documentElement
  let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
  if (rfs) { // typeof rfs != "undefined" && rfs
	rfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
	// for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
	let wscript = new ActiveXObject('WScript.Shell')
	if (wscript != null) {
	  wscript.SendKeys('{F11}')
	}
  }
}
// 退出全屏
function exitFullScreen () {
  let el = document
  let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen
  if (cfs) { // typeof cfs != "undefined" && cfs
	cfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
	// for IE,这里和fullScreen相同,模拟按下F11键退出全屏
	let wscript = new ActiveXObject('WScript.Shell')
	if (wscript != null) {
	  wscript.SendKeys('{F11}')
	}
  }
}

js如何实现复制页面内容的三种方法

javascript实时监听容器的尺寸,防止溢出屏幕

完美解决el-table设置高度和合计showsummary冲突不显示问题

js按钮控制全屏和退出全屏

js解决前端代码中因引号和空额冲突的解决方法

标签: addEventList, 全屏, 冲突

上面是“F11全屏功能和js全屏功能冲突解决方法”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2255.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > js
本文共计1254个字,预计阅读时长9分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个免费可商用psd文件素材网站——FreePik
下一篇: 一行代码轻松实现优雅的过渡动画插件——AutoAnimate
x 打工人ai神器