DIV 上的 HTML 全屏 API

【问题标题】：HTML fullscreen API on DIVDIV 上的 HTML 全屏 API
【发布时间】：2014-04-19 15:58:13
【问题描述】：

HTML 全屏是否适用于 DIV？

<!DOCTYPE html>
<html><head>
</head><body>
<div id="e">fullscreen</div>
<script>
    window.onload = function() {
        var elem = document.getElementById("e");
        if (elem.webkitRequestFullscreen)
        {
            elem.innerHTML += " has function";
            elem.webkitRequestFullscreen();
        }
    }
</script>
</body></html>

它在 Chrome 上输出fullscreen has function。但是没有全屏。

【问题讨论】：

标签： javascript html webkit fullscreen

【解决方案1】：

它必须由用户操作触发：http://jsfiddle.net/DerekL/cHuNr/show/

var div = document.querySelector("div"),
    btn = document.querySelector("button");
btn.addEventListener("click", function () {
    if (div.webkitRequestFullscreen) {
        div.innerHTML += " has function";
        div.webkitRequestFullscreen();
    }
});

【讨论】：