如何发现 canvas.requestFullscreen() 失败的原因?

问题描述

手头的任务是为用 Dart 编写的 WebGL 应用程序添加对全屏模式的支持.

Task at hand is to add support for fullscreen mode to an WebGL application written in Dart.

canvas.requestFullscreen() 适用于简单的测试用例，但在整个应用程序上失败.

canvas.requestFullscreen() works for simple test cases, but fails on the full app.

请指出阻止浏览器切换到全屏的原因.

Please point out the way to tell what is preventing the browser from switching to fullscreen.

代码是:

void trapFullscreenError() {
  document.onFullscreenError.listen((e) {
    log("fullscreenerror: $e");
  });
}

void toggleFullscreen(CanvasElement c) {
  log(
      "fullscreenSupport=${document.fullscreenEnabled} fullscreenElement=${document.fullscreenElement}"
      );

  if (document.fullscreenElement != null) {
    log("exiting fullscreen");
    document.exitFullscreen();
  } else {
    log("requesting fullscreen");
    c.requestFullscreen();
  }
}

在 Chrome 中该代码导致:

In Chrome that code results in:

fullscreenSupport=true fullscreenElement=null
requesting fullscreen
fullscreenerror: Instance of 'Event'

Dartium 调试器显示以下字段:

Dartium debugger shows these fields:

Event [id=4]
_selector null
bubbles true
cancelable false
clipboardData null
currentTarget #document [id=5]
defaultPrevented false
eventPhase 3
hashCode 234642739
path NodeList[6] [id=6]
target canvas#main_canvas [id=7]
timeStamp 1398779450832
type "webkitfullscreenerror"

推荐答案

出于安全原因，requestFullscreen 只能在键盘或点击事件的事件处理程序中调用.

For security reasons requestFullscreen can only be called in an event handler of a keyboard or click event.

另请参阅Javascript 请求全屏不可靠

这篇关于如何发现 canvas.requestFullscreen() 失败的原因?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！