1.requestFullscreen()

全屏请求方法，使用方法：Element.requestFullscreen()。

<div id="example">
    <img src="html5.png">
    <button type="button" id="requestFullscreen">requestFullscreen</button>
</div>

<script>
// 全屏
document.getElementById('requestFullscreen').addEventListener('click', () => {
    document.querySelector('img').webkitRequestFullscreen();
});
</script>

触发事件后会有

按ESC即可退出全屏模式

的文字提示。

1.在< iframe >框架中使用全屏需要加allowfullscreen属性。
2.全屏请求只能通过用户操作触发，否则会出现Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.这样的警告，解决办法是将此方法绑定到某个用户操作事件上，例如点击事件click。

2.exitFullscreen()

退出全屏模式的方法，使用方法：document.exitFullscreen()，除了requestFullscreen()其它方法和属性都是基于document的。

3.fullscreenElement

若是全屏模式下，显示全屏的元素，若不是，返回null。

4.fullscreenEnabled

返回一个布尔值true/false，判断是否可用全屏模式。

<div id="example">
    <img src="html5.png">
    <button type="button" id="fullscreenEnabled">fullscreenEnabled</button>
</div>

<script>
// 全屏是否可用
document.getElementById('fullscreenEnabled').addEventListener('click', () => {
    console.log(document.webkitFullscreenEnabled); // true
});
</script>