HTML5 Fullscreen页面全屏 API

在HTML 5中，新增一个Fullscreen API，其作用为将页面整体或页面中某个局部区域设为全屏显示状态。
到目前为止，Firefox 10以上、Chrome 16以上、Safari 5.1以上、Opera 12以上版本的浏览器支持Fullscreen API。

在Fullscreen API中，可以通过DOM对象的根节点对象（document.documentElement）或某个元素requestFullscreen属性值（在代码中需根据不同的浏览器添加浏览器前缀并将requestFullscreen修改为requestFullScreen，例如mozRequestFullScreen）来判断浏览器是否支持Fullscreen API

在Fullscreen API中，可以通过DOM对象的根节点对象（document.documentElement）或某个元素的requestFullScreen方法（在代码中需根据不同的浏览器添加浏览器前缀并将requestFullscreen修改为requestFullScreen，例如mozRequestFullScreen）将页面或元素设定为全屏显示状态

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
}
// 如果当前浏览器为Firefox浏览器
else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}
// 如果当前浏览器为Chrome浏览器、Opera浏览器或Safari浏览器
else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen API中，也 可 以 通 过DOM对 象 或 某 个 元 素 的exitFullscreen属 性值或CanvelFullScreen属性值（在代码中需根据不同的浏览器添加浏览器前缀

在Fullscreen API中，也可以通过DOM对象或某个元素的exitFullscreen方法或CanvelFullScreen方法（在代码中需根据不同的浏览器添加浏览器前缀，例如mozCanvelFullScreen）将当前页面或某个元素设定为非全屏显示状态

if (document.exitFullscreen) {
        document.exitFullscreen();
}
// 如果当前浏览器为Firefox浏览器
else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
}
// 如果当前浏览器为Chrome浏览器、Opera浏览器或Safari浏览器
else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
}

在Fullscreen API中，可以通过监听DOM对象或某个元素的fullscreenchange事件（当页面或元素从非全屏显示状态变为全屏显示状态或从全屏显示状态变为非全屏显示状态时触发，在代码中需根据不同的浏览器添加浏览器前缀，例如mozfullscreenchange）并指定事件处理函数来指定当页面或元素变为全屏显示状态或非全屏显示状态时所需执行的处理

在事件处理函数中，可以通过DOM对象的fullscreen属性值（在代码中需根据不同的浏览器添加浏览器前缀并将fullscreen修改为FullScreen，例如mozFullScreen，在Chrome浏览器、Opera浏览器或Safari浏览器中，需将fullscreen修改为webkitIsFullScreen）来判断页面或元素是否处于全屏显示状态

document.addEventListener("fullscreenchange", function () {
    var fullscreenState=document.getElementById("fullscreenState");
    fullscreenState.innerHTML =
    (document.fullscreen)? "全屏显示" : "非全屏显示";
}, false);
document.addEventListener("mozfullscreenchange", function () {
    var fullscreenState=document.getElementById("fullscreenState");
    fullscreenState.innerHTML =
    (document.mozFullScreen)? "全屏显示" : "非全屏显示";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
    var fullscreenState=document.getElementById("fullscreenState");
    fullscreenState.innerHTML =
      (document.webkitIsFullScreen)? "全屏显示" : "非全屏显示";
}, false);

在CSS样式代码中，我们可以使用伪类选择器来单独指定处于全屏显示状态的页面或元素的样式，代码如下所示

html:-moz-full-screen {
    background: red;
}
html:-webkit-full-screen {
    background: red;
}
html:fullscreen {
    background: red;
}

Fullscreen API代码使用示例

示例页面中显示一个“页面全屏显示”按钮与一个div元素，div元素中显示“非全屏显示”文字。单击“页面全屏显示”按钮后按钮文字变为“页面非全屏显示”，div元素中显示“全屏显示”文字，页面变为全屏显示状态，页面背景色变为红色；单击“页面非全屏显示”按钮后按钮文字变为“页面全屏显示”， div元素中显示“非全屏显示”文字，页面恢复为非全屏显示状态，页面背景色恢复为白色

    <input type="button" id="btnFullScreen" value="页面全屏显示"
    onclick="toggleFullScreen();">
    <div style="width:100%;" id="fullscreenState">非全屏显示</div>

html:-moz-full-screen {
    background: red;
}
html:-webkit-full-screen {
    background: red;
}
html:fullscreen {
    background: red;
}

var docElm = document.documentElement;
var fullscreenState=document.getElementById("fullscreenState");
var btnFullScreen=document.getElementById("btnFullScreen");
fullscreenState.style.height=docElm.clientHeight+"px";
document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML =
    (document.fullscreen) ? "全屏显示" : "非全屏显示";
    btnFullScreen.value=
    (document.fullscreen) ? "页面非全屏显示": "页面全屏显示";
}, false);
document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML =
    (document.mozFullScreen) ? "全屏显示" : "非全屏显示";
    btnFullScreen.value=
    (document.mozFullScreen) ? "页面非全屏显示": "页面全屏显示";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML =
    (document.webkitIsFullScreen) ? "全屏显示" : "非全屏显示";
    btnFullScreen.value=
    (document.webkitIsFullScreen) ? "页面非全屏显示": "页面全屏显示";
}, false);
function toggleFullScreen()
{
    if(btnFullScreen.value=="页面全屏显示")
    {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }
    else
    {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        // 如果当前浏览器为Firefox浏览器
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        // 如果当前浏览器为Chrome浏览器、Opera浏览器或Safari浏览器
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}