JS全屏事件 模拟键盘事件F11 兼容IE
原创
©著作权归作者所有:来自51CTO博客作者lMovIKE的原创作品,请联系作者获取转载授权,否则将追究法律责任
方法1:
// 全屏 //el为全屏对象
fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript) {
wscript.SendKeys("{F11}");
}
}
},
// 退出全屏
exitFullScreen(el) {
var el = document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
调用
// 全屏
fullScreen(app);
// 退出全屏
exitFullScreen();
方法2:
//全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
// 退出全屏
//W3C
if (document.exitFullscreen) {
document.exitFullscreen();
}
//FireFox
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
//Chrome等
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
data.name = '全屏'
}
//IE11
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
我碰到的问题:刚开始调用是if 全屏 if 退出全屏,这里if判断的失误导致点击全屏后文字马上由变成了退出全屏变成全屏,但是vue很handleClick很奇怪的是只执行了 data.name = '全屏',但是没有执行 me.exitFullScreen();
到了IE里面两句话就都执行了,然后我错误的以为这里的全屏未生效,其实是执行完全屏后马上退出全屏了
最终代码 全屏退出全屏方法(兼容IE)
// 全屏 //el为全屏对象 // 判断各种浏览器,找到正确的方法
launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen(); return true
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); return true
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); return true
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); return true
}
},
// 退出全屏
exitFullScreen(el) {
if (document.exitFullscreen) {
document.exitFullscreen(); return true
} else if (document.msExitFullscreen) {
document.msExitFullscreen(); return true
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); return true
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen(); return true
}
},
调用
// 全屏
if (data.name == '全屏') {
// 启动全屏!
me.launchFullScreen(document.documentElement);
data.name = '退出全屏'
} else if (data.name == '退出全屏') {
me.exitFullScreen();
data.name = '全屏'
}