问题描述:
做一个网站,用户需要把网站用在大屏幕上,触摸屏。所以没有键盘按F11键。在页面上添加全屏及退出全屏功能。
jquery也是js,浏览器的F11全屏 JS无法实现,死心吧。遮盖层遮盖浏览器窗口的内容倒是可以。完全实现 F11的功能目前是没有办法的。另外,用户想全屏,提示下按F11就可以了,没有必要代码去写。另外,全屏功能并不是好的用户体验
遮盖层遮盖浏览器窗口的内容倒是可以...。
直接使IE全屏是做不到的,只能新打开一个当前窗口并使打开的窗口全屏
window.open(location.href,'','fullscreen=1')
解决办法:
//id='content'需要放置在最外围的div中或者body中
<div id="content"></div>
<button id='btn'>全屏按钮</button> //全屏按钮,没有点击的时候退出全屏按钮是不管用的。比如用F11全屏了,再点击退出全屏按钮就不管用。
<button id="quite" class="btn">退出全屏</button>
<script type="text/javascript">
var quite = document.getElementById('quite');
quite.onclick = function(){
exitFullScreen();
}
var btn = document.getElementById('btn');
var content = document.getElementById('content');
btn.onclick = function(){
fullScreen(content);
}
function 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}");
}
}
}
function 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}");
}
}
}
</script>
第二种办法:
在button按钮中添加onclick即可
var fullscreen=function(){
elem=document.body;
if(elem.webkitRequestFullScreen){
elem.webkitRequestFullScreen();
}else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else if(elem.requestFullScreen){
elem.requestFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
elem.msRequestFullscreen();
}
}
var exitFullscreen=function(){
var elem=document;
if(elem.webkitCancelFullScreen){
elem.webkitCancelFullScreen();
}else if(elem.mozCancelFullScreen){
elem.mozCancelFullScreen();
}else if(elem.cancelFullScreen){
elem.cancelFullScreen();
}else if(elem.exitFullscreen){
elem.exitFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
document.msExitFullscreen();
}
}
第三种办法:
function
fullScreen() {
var
el = document.documentElement,
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}"
);
}
}
}
function
exitFullScreen() {
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}"
);
}
}
}