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

Question

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

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

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

代码是：

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 中，该代码导致：

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

Dartium 调试器显示以下字段：

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"

Answer 1

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

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