2019-03-31 iframe 全屏

作为一个用 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
返回一个布尔值,表明浏览器是否支持全屏模式. 全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个