Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,document对象会收到一个fullscreenchange事件,通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可,则会收到一个fullscreenerror事件。

只有包含在顶层文档(top-level document)内部的标准HTML元素、<svg>元素和<math>元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。

语法

Element.requestFullscreen();

示例

在调用requestFullScreen()之前,可以对fullscreenchange 和 fullscreenerror事件进行监听,这样在请求进入全屏模式成功或者失败时都能收到事件通知。

API规格

Specification Status Comment
Fullscreen API
Element.requestFullScreen()
Living Standard Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox Internet Explorer Edge Opera Safari
Basic support (Yes)webkit[1] (Yes) 9.0 (9.0) as mozRequestFullScreen[2]
47.0 (47.0) (behind full-screen-api.unprefix.enabled
11ms[3] (Yes)[3] ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 9.0 (9.0) as mozRequestFullScreen[2]
47.0 (47.0) (behind full-screen-api.unprefix.enabled
? ? ?

[1] 同样以webkitRequestFullScreen方法实现。

[2] 使用带有浏览器前缀的mozRequestFullScreen方法实现。在火狐44之前版本,Gecko浏览器内核错误地允许frame里面元素以及object元素进入全屏模式。而在之后的版本,这个漏洞被修复:仅允许位于顶部文档(top-level document)的元素,以及拥有allowfullscreen属性的iframe的内部元素进入全屏显示。. 

[3] 使用IE时,最后的screen的s为小写,也即msRequestFullscreen,否则无效

[4] 谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s,建议写成驼峰命名法

[5]将浏览器前缀兼容封装成函数

function toFullVideo(){

if(videoDom.requestFullscreen){

return videoDom.requestFullScreen();

}else if(videoDom.webkitRequestFullScreen){

return videoDom.webkitRequestFullScreen();

}else if(videoDom.mozRequestFullScreen){

return videoDom.mozRequestFullScreen();

}else{

return videoDom.msRequestFullscreen();

}

}

[6] 详见 documentation on MSDN.

参阅

文档标签和贡献者

此页面的贡献者: edgexie1, zhy90655, LiJonsen, hmzll, cokepluscarbon
最后编辑者: edgexie1,