首先,根据如下警告信息,可以看出,无法自动实现全屏功能,必须要手动才可以.
Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.
所以要实现全屏你可以通过点击一个 button 控件，或是整个 document 添加一个click 事件,通过点击来手动实现全屏。当然，监听键盘事件也是可以的，实现类似于F11的功能。
我这里的例子是通过监听 document.click 事件来实现整个页面的全屏，需要实现某个页面元素的全屏，可以在网上找找，例子很多。
window.onclick = document.onclick = function (e) {
var el = document.documentElement;
//这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
fullScreen(el);
}
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined") {
//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}通过如下方式，想要实现自动全屏，但不行，提示必须手动的警告信息：
Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.
setTimeout(function() {
// IE
if(document.all) {
document.click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.dispatchEvent(e);
}
}, 1000);判断当前页面是不是全屏的。
/*最好先将页面设置成无滚动(可选)*/
html {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}function checkFull() {
//使用html5中的API判断是否全屏(返回当前全屏的元素)
var FullEl = document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
//若是不支持Html5中的API，可以使用以最原始的判断方式，但需要将页面的滚动条去掉
if (FullEl === null) {
return isFullscreenForNoScroll();
}
return true;
}
/**
* 支持无滚动条的页面以 Fullscreen api启动的全屏 或是 按f11启动的全屏
* 不支持有滚动条的页面
* @returns {boolean}
*/
function isFullscreenForNoScroll(){
var explorer = window.navigator.userAgent.toLowerCase();
if(explorer.indexOf('chrome')>0){//webkit
if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
console.log("全屏");
return true;
} else {
console.log("不全屏");
return false;
}
}else{//IE 9+ fireFox
if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
console.log("全屏");
return true;
} else {
console.log("不全屏");
return false;
}
}
}在全屏模式下，按 ESC 或是 F11，会执行系统默认的操作，退出全屏，这个是没有方式可以避免的。但我们可以在退出全屏后，实现自己的操作。
function afterExitFull () {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
//若是支持html5的API
if (typeof rfs != "undefined" && rfs) {
window.onkeydown = document.onkeydown = function (e) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 122){//捕捉F11键盘动作
e.preventDefault(); //阻止不了F11默认动作
e.stopPropagation();
//监听不同浏览器的全屏事件，并件执行相应的代码
document.addEventListener("webkitfullscreenchange", function(evt) {//
if (document.webkitIsFullScreen) {
//全屏后要执行的代码
}else{
//退出全屏后执行的代码
}
}, false);
document.addEventListener("fullscreenchange", function(evt) {
if (document.fullscreen) {
//全屏后执行的代码
}else{
//退出全屏后要执行的代码
}
}, false);
document.addEventListener("mozfullscreenchange", function(evt) {
if (document.mozFullScreen) {
//全屏后要执行的代码
}else{
//退出全屏后要执行的代码
}
}, false);
document.addEventListener("msfullscreenchange", function(evt) {
if (document.msFullscreenElement) {
//全屏后要执行的代码
}else{
//退出全屏后要执行的代码
}
}, false)
}
}
//否则，使用原始的方法
} else {
window.onresize = function(e) {
if (checkFull()) {
//退出全屏后要执行的代码
} else {
//全屏后要执行的代码
}
};
}
}