HTML DOM requestFullscreen() 方法
requestFullscreen()方法用来在全屏模式下打开一个元素。
此方法需要特定的前缀才能在不同的浏览器中工作(请参考下面的浏览器兼容性)。
语法：HTMLElement.requestFullscreen()
示例/* 获取()元素以全屏显示页面 */
var elem = document.documentElement;
/* 全屏查看 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}测试看看‹/›
浏览器兼容性
表格中的数字指定了完全支持该方法的第一个浏览器版本。每个浏览器都需要一个特定的供应商前缀：Method
requestFullscreen()15.0(Webkit)9.0(moz)12.10(Webkit)5.1(Webkit)11.0(ms)
技术细节返回值：没有
更多实例
以全屏模式显示元素：
示例/* 获取()元素 */
var elem = document.getElementsByTagName(“video”)[0];
/* 全屏查看 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}测试看看‹/›
当页面处于全屏模式时，可以使用CSS设置页面样式：
示例div:-moz-full-screen {
background-color: pink;
}
div:-webkit-full-screen {
background-color: pink;
}
div:fullscreen {
background-color: pink;
}测试看看‹/›
相关参考