From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/element/requestfullscreen/index.html | 177 +++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/zh-cn/web/api/element/requestfullscreen/index.html (limited to 'files/zh-cn/web/api/element/requestfullscreen') diff --git a/files/zh-cn/web/api/element/requestfullscreen/index.html b/files/zh-cn/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..045a760246 --- /dev/null +++ b/files/zh-cn/web/api/element/requestfullscreen/index.html @@ -0,0 +1,177 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

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

+ +

调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的{{JSxRef("Promise")}}会resolve，并且该元素会收到一个{{event("fullscreenchange")}}事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个{{Event('fullscreenerror')}}事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

+ +

早期的Fullscreen API实现总是会把这些事件发送给document，而不是调用的元素，所以你自己可能需要处理这样的情况。参考 {{SectionOnPage("/zh-CN/docs/Web/Events/fullscreen", "Browser compatibility")}} 来得知哪些浏览器做了这个改动。

+ +
+

注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。

+
+ +

语法

+ +
var Promise = Element.requestFullscreen(options);
+
+ +

参数

+ +

options {{optional_inline}}

+ +

一个{{domxref("FullscreenOptions")}}对象提供切换到全屏模式的控制选项。目前，唯一的选项是{{domxref("FullscreenOptions.navigationUI", "navigationUI")}}，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是"auto"，表明这将由浏览器来决定是否显示导航条。

+ +

返回值

+ +

在完成切换全屏模式后，返回一个已经用值 undefined resolved的{{JSxRef("Promise")}}

+ +

异常

+ +

requestFullscreen() 通过拒绝返回的 Promise来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：

+ +
+
{{jsxref("TypeError")}}
+
在以下几种情况下，会抛出TypeError：
+
+ + + +
+
+ +

示例

+ +

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

+ +

API规格

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefoxInternet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

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

+ +

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

+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf