Javaｓｃｒｉｐｔ控制各种浏览器全屏模式的方法、属性和事件

复制代码代码如下所示：
判断浏览器，找到正确的方法。
功能launchfullscreen（元）{
如果（元。requestfullscreen）{
element.requestfullscreen（）；
} else if（元。mozrequestfullscreen）{
element.mozrequestfullscreen（）；
} else if（元。webkitrequestfullscreen）{
element.webkitrequestfullscreen（）；
} else if（元。msrequestfullscreen）{
element.msrequestfullscreen（）；
}
}

启动屏幕！
launchfullscreen（文档。文档元素}）； / /整个页面
launchfullscreen（document.getelementbyid（videoelement ））； / /一个页面元素

要显示全屏的页面元素调用全屏方法。浏览器窗口将成为全屏，但用户将被要求允许全屏模式。重要的是要注意，用户可能会拒绝全屏模式。如果用户运行全屏模式，按钮菜单，如浏览器的工具栏将被隐藏，你的页面将覆盖整个屏幕。

退出全屏模式

这exitfullscreen方法（也需要一个浏览器前缀）会让浏览器退出全屏模式，成为一个正常的模式。
复制代码代码如下所示：
浏览器类型/判断
功能exitfullscreen（）{
如果（文件。exitfullscreen）{
document.exitfullscreen（）；
} else if（文件。mozcancelfullscreen）{
document.mozcancelfullscreen（）；
} else if（文件。webkitexitfullscreen）{
document.webkitexitfullscreen（）；
}
}

/ /退出全屏模式！
ExitFullscreen（）；

需要注意的是，exitfullscreen只能称为文档对象重要，不是对象，介绍了在全屏幕开始。

全屏属性和事件

不幸的是，全屏属性和与事件相关的方法也需要添加浏览器前缀，但我认为不必这么做。

1.document.fullscreenelement：全屏显示页面元素。
2.document.fullscreenenabled：确定它是否在全屏状态。

的fullscreenchange事件被触发时，全屏启动或全屏幕被撤回。

复制代码代码如下所示：
无功fullscreenelement = document.fullscreenelement document.mozfullscreenelement document.webkitfullscreenelement | | | |；
无功fullscreenenabled = document.fullscreenenabled document.mozfullscreenenabled document.webkitfullscreenenabled | | | |；
您仍然可以通过判断浏览器的多样性的方法来对事件进行前缀。

全屏样式CSS

各种浏览器都为全屏模式提供了非常有用的CSS样式规则：

复制代码代码如下：- WebKit全屏{
属性
}

-moz全屏{
属性
}

MS全屏{
属性
}

（全屏）
属性
}

规格：全屏{ / * * /
属性
}

更深的元素
WebKit的全屏幕视频{
宽度：100%；
身高：100%；
}

样式/背景*
：背景{
属性
}
：- MS背景{
属性
}

在某些情况下，有与WebKit风格有些问题，你最好把这些款式简单。
这些全屏API是超级简单，超级有用的。这是第一次，我在MDN的bananabread演示看到这个API。这是一款只需要全屏的射击游戏。它使用事件侦听器检测全屏状态。记住好的API，当需要时可以选择它。