HTML5 – 全屏接口的使用

简介

HTML5 中新增了页面全屏操作，但是每个浏览器对于全屏都不一样。

功能

HTML5 中新增了全屏浏览器标准，他们的调用代码分别是

设置全屏：element.requestFullScreen()

退出全屏：document.cancelFullScreen()

是否全屏：document.fullScreenElement

但是对于所有浏览器中，这三个都不能被调用，因为每一个浏览器都有属于它们的前缀，只有符合属于他们浏览器后前缀的方法和属性，才能被正确调用。

Chrome 浏览器

浏览器识别前缀：webkit

设置全屏：

element.webkitRequestFullScreen()

注意：这里的全屏是元素调起的，不是由 document 调起的

const div = document.getElementById('div');

div.webkitRequestFullScreen() 

退出全屏：

document.webkitCancelFullScreen()

注意：这里使用的是 document 调起的，不是 element 调起的

是否全屏：

document.webkitFullScreenElement

会返回 bool 类型，全屏返回 true , 不全屏返回false

FireFox 浏览器

浏览器识别前缀：moz

设置全屏：

element.mozRequestFullScreen()

注意：这里的全屏是元素调起的，不是由 document 调起的

const div = document.getElementById('div');

div.mozRequestFullScreen() 

退出全屏：

document.mozCancelFullScreen()

注意：这里使用的是 document 调起的，不是 element 调起的

是否全屏：

document.mozFullScreenElement

会返回 bool 类型，全屏返回 true , 不全屏返回false

Internet Explore 浏览器

浏览器识别前缀：ms

注意：仅支持 IE 10 以上版本，IE 10 以下版本不支持全屏

设置全屏：

element.msRequestFullScreen()

注意：这里的全屏是元素调起的，不是由 document 调起的

const div = document.getElementById('div');

div.msRequestFullScreen() 

退出全屏：

document.msCancelFullScreen()

注意：这里使用的是 document 调起的，不是 element 调起的

是否全屏：

document.msFullScreenElement

会返回 bool 类型，全屏返回 true , 不全屏返回false

Opera 浏览器

浏览器识别前缀：o

设置全屏：

element.oRequestFullScreen()

注意：这里的全屏是元素调起的，不是由 document 调起的

const div = document.getElementById('div');

div.oRequestFullScreen() 

退出全屏：

document.oCancelFullScreen()

注意：这里使用的是 document 调起的，不是 element 调起的

是否全屏：

document.oFullScreenElement

会返回 bool 类型，全屏返回 true , 不全屏返回false