如何在编译的dart中请求全屏 [英] How to request fullscreen in compiled dart

问题描述

我在玩一个Dart应用程序，试图让全屏模式工作。我的HTML（不包括样板）：

I'm playing around with a Dart app trying to get fullscreen mode to work. My HTML (excluding boilerplate):

<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');
  });
}

这里是DartPad。

如果我这样做了，点击div一次就会导致div进入全屏模式。在Chromium上，这个工作。当编译为JavaScript（调试和缩小），这不会发生，控制台输出：

If I've done this correctly, clicking the div once should cause the div to go into fullscreen mode. On Chromium, this works. When compiled to JavaScript (both debug and minified), this does not happen, and the console outputs:

Uncaught TypeError: undefined is not a function

这发生在Chrome，Firefox和IE（在Windows 7上测试）。从我已经明白这是一个常见的JavaScript错误，搜索不会带来任何明显的。

This happens on both Chrome, Firefox and IE (tested on Windows 7). From what I've understood this is a common JavaScript error, and searching does not bring up anything obvious.

当dart被编译为JS时，为什么 requestFullScreen 不能工作？

Any ideas why requestFullScreen won't work when dart is compiled to JS?

推荐答案

正如评论中指出的（感谢Günter！），这是一个已知问题。 ＃12在那个线程中发布了一个很好的解决方法，由我编辑为更通用：

As pointed out in the comments (thanks Günter!), this is a known issue. #12 in that thread posted a good workaround, edited by me to be a bit more generic:

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;
      }
    }
  }
}

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

I used this in my code, and replaced this call

div.requestFullscreen();

与

fullscreenWorkaround(div);

已在Chrome和IE上测试和运行编译。

which worked great. Tested and working compiled on Chrome and IE.

这篇关于如何在编译的dart中请求全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！