2

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

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

我的飞镖代码：

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（调试和缩小）时，不会发生这种情况，并且控制台输出：

Uncaught TypeError: undefined is not a function

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

任何想法为什么requestFullScreen在将 dart 编译为 JS 时不起作用？

4

2 回答 2

4

正如评论中所指出的（感谢 Günter！），这是一个已知问题。该线程中的 #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 上经过测试和编译。

于 2015-04-18T09:26:54.910 回答
4

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

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];
      }
    }
  }
}
于 2015-04-20T15:11:20.320 回答