How to request fullscreen in compiled dart

Question

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

  Clicking this         


        
      

Answer 1

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

with

fullscreenWorkaround(div);

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