如何发现为什么canvas.requestFullscreen()失败? [英] How to discover why canvas.requestFullscreen() failed?

问题描述

当前的任务是向以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()失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！