js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

1. 解决的问题
   谷歌浏览器F11全屏后，在页面中编写的全屏按钮失效。
2. 解决方法

//判断是否是全屏状态
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}')
		}
	}
}

//以下调用代码根据情况自己改写

//绑定页面全屏按钮的点击事件
handler : function() {
	switchFullScreen();
}

//调用方法
switchFullScreen : function() {
	if (isFull) {
		exitFullScreen();
	} else {
		enterFullScreen();
	}
}

具体逻辑就是 阻止F11键默认事件，用HTML5全屏API代替