js点击按钮模拟F11完成打开和关闭全屏功能& 使用js模拟键盘调用事件
目录
- 一、打开全屏
- 二、关闭全屏
- 三、js模拟键盘事件
- 四、DMEO源码
一、打开全屏
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
二、关闭全屏
function exitFullScreen(el) {
var el = document
var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
el.exitFullscreen,
wscript
if (cfs) {
cfs.call(el);
return;
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else {
alert('浏览器不支持全屏API或已被禁用')
}
}
以上两个方法中的关闭全屏是需要配合fullScreen方法使用，而在使用F11打开后，这个exitFullScreen方法并不能关闭全部屏幕！
- 调用
<button id="openBtnEsc">打开全屏button>
<button id="btnEsc">退出button>
<script>
document.getElementById('openBtnEsc').onclick = function () {
return fullScreen();
}
document.getElementById('btnEsc').onclick = function () {
exitFullScreen()
}
script>
三、js模拟键盘事件
- 代码：
function fireKeyEvent(el, evtType, keyCode, keyName) {
var doc = el.ownerDocument,
win = doc.defaultView || doc.parentWindow,
evtObj;
if (doc.createEvent) {
if (win.KeyEvent) {
evtObj = doc.createEvent('KeyEvents');
evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0);
} else {
evtObj = doc.createEvent('UIEvents');
Object.defineProperty(evtObj, 'keyCode', {
get: function () {
return this.keyCodeVal;
}
});
Object.defineProperty(evtObj, 'which', {
get: function () {
return this.keyCodeVal;
}
});
evtObj.initUIEvent(evtType, true, true, win, 1);
evtObj.keyCodeVal = keyCode;
if (evtObj.keyCode !== keyCode) {
console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
}
evtObj['key'] = keyName
evtObj['metaKey'] = false
evtObj['shiftKey'] = false
}
el.dispatchEvent(evtObj);
} else if (doc.createEventObject) {
evtObj = doc.createEventObject();
evtObj.keyCode = keyCode;
el.fireEvent('on' + evtType, evtObj);
}
}
- 调用
fireKeyEvent(dom元素, ‘绑定的事件名’, 键盘码, ‘事件名称非必须’)
fireKeyEvent(document.querySelector('#btnEsc'), 'keydown', 27, 'Escape')
四、DMEO源码
js模拟F11打开全屏和关闭全屏功能；
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button id="openBtnEsc">打开全屏button>
<button id="btnEsc">退出button>
<script>
模拟键盘事件
function fireKeyEvent(el, evtType, keyCode, keyName) {
var doc = el.ownerDocument,
win = doc.defaultView || doc.parentWindow,
evtObj;
if (doc.createEvent) {
if (win.KeyEvent) {
evtObj = doc.createEvent('KeyEvents');
evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0);
} else {
evtObj = doc.createEvent('UIEvents');
Object.defineProperty(evtObj, 'keyCode', {
get: function () {
return this.keyCodeVal;
}
});
Object.defineProperty(evtObj, 'which', {
get: function () {
return this.keyCodeVal;
}
});
evtObj.initUIEvent(evtType, true, true, win, 1);
evtObj.keyCodeVal = keyCode;
if (evtObj.keyCode !== keyCode) {
console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
}
evtObj['key'] = keyName
}
el.dispatchEvent(evtObj);
} else if (doc.createEventObject) {
evtObj = doc.createEventObject();
evtObj.keyCode = keyCode;
el.fireEvent('on' + evtType, evtObj);
}
}
//关闭全屏
function exitFullScreen(el) {
var el = document
var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
el
.exitFullscreen,
wscript
if (cfs) {
cfs.call(el);
return;
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else {
alert('浏览器不支持全屏API或已被禁用')
}
}
//打开全屏
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
document.getElementById('openBtnEsc').onclick = function () {
return fullScreen();
}
document.getElementById('btnEsc').onclick = function () {
fireKeyEvent(document.querySelector('#btnEsc'), 'keydown', 27, 'Escape')
exitFullScreen()
}
$(document).keydown(function (e) {
console.log(e)
});
script>
body>
html>