作为一个用 iframe 嵌入的页面，要做一个全屏的功能
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();//ie浏览器
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();//谷歌浏览器
}
}
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
// 监听全屏事件webkitfullscreenchange是谷歌内核的事件；MSFullscreenChange是ie内核的事件
document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen');
} else {
console.log('exit fullscreen');
//可以在这里做一些退出全屏时的事
}
}, false);
document.mozFullScreenEnabled
返回一个布尔值,表明浏览器是否支持全屏模式. 全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个<iframe>元素中的页面,则它必需拥有mozallowfullscreen属性.
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (
document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Document.exitFullscreen() 方法用于让当前文档退出全屏模式。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。
备注: 如果一个元素A在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。
var fullscreenEnabled = document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement;
if (fullscreenEnabled) {
btn.addEventListener('click', function () {
var fullscreenElement = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
if (fullscreenElement) {
exitFullscreen();
btn.innerHTML = '全屏';
} else {
// Document.documentElement 是一个会返回文档对象（document）的根元素的只读属
// 性（如HTML文档的 <html> 元素）。
launchFullscreen(document.documentElement);
btn.innerHTML = '退出全屏';
}
}, false);
}
document.fullscreenElement
得到处于全屏模式的元素
网友评论