dart - 如何在编译的 Dart 中请求全屏

Question

我正在玩一个 Dart 应用程序，试图让全屏模式正常工作。我的 HTML(不包括样板文件):

<div id="fullscreen_div">
  Clicking this should cause it to go fullscreen!
</div>

我的 Dart 代码:

import 'dart:html';

void main() {
  var div = querySelector('#fullscreen_div');
  div.onClick.listen((MouseEvent e) {
    div.requestFullscreen();
    print('requested fullscreen');
  });
}

Here it is on DartPad.

如果我做对了，单击一次 div 应该会导致 div 进入全屏模式。在 Chromium 上，这有效。当编译为 JavaScript(调试和缩小)时，这不会发生，并且控制台输出:

Uncaught TypeError: undefined is not a function

这在 Chrome、Firefox 和 IE 上都会发生(在 Windows 7 上测试过)。据我了解，这是一个常见的 JavaScript 错误，搜索并没有发现任何明显的错误。

为什么 requestFullScreen 在 dart 被编译为 JS 时不起作用？有什么想法吗？

Answer 1

正如评论中指出的(感谢 Günter!)，这是一个 known issue .该线程中的 #12 发布了一个很好的解决方法，由我编辑为更通用一些:

import 'dart:js';
void fullscreenWorkaround(Element element) {
  var elem = new JsObject.fromBrowserObject(element);

  if (elem.hasProperty("requestFullscreen")) {
    elem.callMethod("requestFullscreen");
  }
  else {
    List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
    for (String vendor in vendors) {
      String vendorFullscreen = "${vendor}RequestFullscreen";
      if (vendor == 'moz') {
        vendorFullscreen = "${vendor}RequestFullScreen";
      }
      if (elem.hasProperty(vendorFullscreen)) {
        elem.callMethod(vendorFullscreen);
        return;
      }
    }
  }
}

我在我的代码中使用了它，并替换了这个调用

div.requestFullscreen();

与

fullscreenWorkaround(div);

效果很好。在 Chrome 和 IE 上测试和编译。