如何在编译的dart中请求全屏显示

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

如果操作正确，单击div一次应该会使div进入全屏模式。在铬上，这是有效的。编译为JavaScript（调试和缩小）时，不会发生这种情况，控制台输出：

Uncaught TypeError: undefined is not a function

这在Chrome、Firefox和IE（在Windows7上测试）上都会发生。据我所知，这是一个常见的JavaScript错误，搜索不会产生任何明显的错误

---

如果你想知道为什么dart编译成JS时，

requestFullScreen

不起作用吗？

正如评论中所指出的（谢谢居里！），这是一个好主意#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;
      }
    }
  }
}

与

---

这很有效。在Chrome和IE上测试并编译。

这里是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];
      }
    }
  }
}

---

一些额外的信息感谢@GünterZöchbauer，变通方法对我有效。用这些信息回答我自己的问题可以吗，还是我应该等其他人呢？完全可以回答你自己的问题。无论如何，你必须等待一段时间才能接受它，如果其他人稍后提出更好的解决方案，你可以随时做出另一个被接受的答案。

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

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