Question

我正在玩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');
  });
}

Here it is on DartPad.

如果我已正确完成此操作，请单击div一次以使div进入全屏模式。在Chromium上，这是有效的。当编译为JavaScript（调试和缩小）时，这不会发生，并且控制台输出：

Uncaught TypeError: undefined is not a function

这种情况发生在Chrome，Firefox和IE上（在Windows 7上测试过）。根据我的理解，这是一个常见的JavaScript错误，搜索并没有带来任何明显的错误。

当dart编译为JS时，为什么requestFullScreen无法工作的任何想法？

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

以下是使用整个全屏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];
      }
    }
  }
}

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

2 个答案: