如何在编译的飞镖中请求全屏

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.

上测试和编译

Answer 2

这是使用整个全屏的 Tobbe hack 的扩展版本 API。

import 'dart:html';
import 'dart:js';

// Workaround for https://code.google.com/p/dart/issues/detail?id=4136
class FullscreenWorkaround {
  static void requestFullscreen(Element element) {
    _callMethods(element, [
      'requestFullscreen',
      'webkitRequestFullscreen',
      'mozRequestFullScreen',
      'msRequestFullscreen',
      'oRequestFullscreen'
    ]);
  }

  static void exitFullscreen() {
    _callMethods(document, [
      'exitFullscreen',
      'webkitExitFullscreen',
      'mozCancelFullScreen',
      'msExitFullscreen',
      'oExitFullscreen'
    ]);
  }

  static bool get fullscreenEnabled {
    var result = _getProperty(document, [
      'fullscreenEnabled',
      'webkitFullscreenEnabled',
      'mozFullScreenEnabled',
      'msFullscreenEnabled',
      'oFullscreenEnabled'
    ]);
    return result != null ? result : false;
  }

  static get fullscreenElement {
    return _getProperty(document, [
      'fullscreenElement',
      'webkitFullscreenElement',
      'mozFullScreenElement',
      'msFullscreenElement',
      'oFullscreenElement'
    ]);
  }

  static _callMethods(browserObject, List methods) {
    var jsElem = new JsObject.fromBrowserObject(browserObject);

    for (String methodName in methods) {
      if (jsElem.hasProperty(methodName)) {
        return jsElem.callMethod(methodName);
      }
    }
  }

  static _getProperty(browserObject, List properties) {
    var jsElem = new JsObject.fromBrowserObject(browserObject);

    for (String propertyName in properties) {
      if (jsElem.hasProperty(propertyName)) {
        return jsElem[propertyName];
      }
    }
  }
}

如何在编译的飞镖中请求全屏

How to request fullscreen in compiled dart

dart

html5-fullscreen