Using RequestFullscreen

I can’t get RequestFullscreen to work in Chrome (version 41). It doesn’t do anything. I am putting this in Shown event for a WebPage:

  Dim s as string
  s = "var element = document.getElementById ( '"+self.ControlID+"');"
  s = s +"if  (element.requestfullscreen )  {"
  s = s + "if  (! element.fullscreen )  {"
  s = s + "element.requestfullscreen ();}"
  s = s + "}  else  {"
  s = s + "element.exitfullscreen ();}}"
  self.ExecuteJavaScript(s)

I also tried using webkitRequestFullscreen.

Is there an easier/better way? Perhaps a setting in the header?

You should be checking fullscreenEnabled first, it may be returning false. Also, keep in mind that the fullscreen API is rather new and probably will not work in older browsers.

Also, while I can’t find documentation either way, it strikes me that this is the type of action that usually requires that it be in the same event loop as a mouse or keyboard event.

I will try using fullscreenEnabled to see if that explains the behavior.

I forgot to mention that the fullscreen works if the code is executed in a button Activate event but only after the second press. Even so, I think this tends to eliminate the possibility that fullscreenEnabled is false but what do I know.

I will try some things and post what I learn.

I also wanted to mention that this came up because a user had IE set to open tabs in a separate window (not a tab) and if the default window is too small (less than 800x600) the app detects that and won’t allow user to continue (even though they have enough resolution to run the app on their computer). So, if we provide a fullscreen (or maximize) button the user wouldn’t have to fiddle with the window or IE settings.

The fullscreen/maximize button will also be appreciated by tablet users (very long story and not critical for our app). We aren’t recommending people use tablets with our app but that doesn’t mean people won’t try.

fullscreenEnabled is false so I guess this means I can’t use the fullscreen method. I am not sure I want to use this anyway because I do not want the browser controls to get hidden.

Option 2 is to just launch the app with the maximum available width and height using this command:

ExecuteJavaScript(“window.moveTo(0, 0);window.resizeTo(screen.availWidth, screen.availHeight);”)

However, I need to find out what the available width and height is in Xojo. I am already using self.width and self.height for current WebPage size but need to know the maximum available.

You could use the websdk for this. Getting those two values when the page first initializes and sending them back to the app should be relatively easy.

It seems like the Javascript resizeTo function does not work if there are other tabs open. Is this by design? Should I try popping up a new window?

Nothing is ever easy.

As it turns out fullscreenEnabled is true. I just needed to check msfullscreenEnabled prefix for IE (for Chome use webkit and Firefox use moz).

All the fullscreen demos work, just isn’t working from Xojo Web app. No error messages.

Not giving up yet but it would be helpful to know if anyone has had success using requestFullscreen or msRequestFullscreeen or mozRequestFullscreen or webkitRequestFullscreen from a Xojo Web app.

Returning to this issue. Any chance someone could put together a demo?

I prefer the Javascript maximize (resizeTo) method but this doesn’t work if another tab is open. I believe that is by design.

I might just resort to putting together a clever instruction (or animation) to show people how to use maximize button (says something about our users).

[quote=192800:@Ken Gish]Returning to this issue. Any chance someone could put together a demo?

I prefer the Javascript maximize (resizeTo) method but this doesn’t work if another tab is open. I believe that is by design.

I might just resort to putting together a clever instruction (or animation) to show people how to use maximize button (says something about our users).[/quote]

I just tried most of the stuff here http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen which simply does not work for a Xojo app.

This works fine in Chrome (even when tabs are open), not in Internet Explorer.
I may have missed something, as the author of the script says it supports it. That is a start, though :

In the FullScreen constant :

function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

In the Shown event of the WebPage :

Sub Shown() dim exe as string = FullScreen exe = exe + "document.getElementById('"+Button1.ControlID+"').onmousedown = function() {requestFullScreen() }; " self.ExecuteJavaScript(exe) End Sub

In fact, what I posted works on Windows with Chrome, FireFox, Opera, but not Internet explorer 11 I have here. On Mac, Safari, Chrome, FireFox, Opera work.

You could simply present IE users with a message telling them to press F11…

That’s awesome Michel. Thanks. I can’t wait to try this out tomorrow. IE is always a problem; I can’t wait until Microsoft gets rid of IE. Windows 10 has new browser called Spartan which I hope works more like Chrome.

I’ll let you know if it works for me.

[quote=193147:@Ken Gish]That’s awesome Michel. Thanks. I can’t wait to try this out tomorrow. IE is always a problem; I can’t wait until Microsoft gets rid of IE. Windows 10 has new browser called Spartan which I hope works more like Chrome.

I’ll let you know if it works for me.[/quote]

I checked with code name Spartan now called Edge in Windows 10 – it works just fine :slight_smile:

It worked! I am pretty sure the reason it wasn’t working for me was that I was trying to trigger automatically in Shown event of webpage. Thanks Greg and Michel for helping me understand that and for showing me the right way.

If I figure out why it isn’t working in IE I will update this post.

Finally getting back into this. The only problem remaining is with IE11; works beautifully in Safari, Firefox, and Chrome (also, according to Michel’s testing it works in Edge too on Windows 10).

In IE11 the fullscreen API simply doesn’t work. I know that the if(document.body.msRequestFullscreen) returns true but the next statement document.body.msRequestFullscreen doesn’t do anything. Sounds identical to what people have discussed on this page (with no resolution and no plan to fix by Microsoft):

https://connect.microsoft.com/IE/feedback/details/956312/ie11-silently-ignores-msrequestfullscreen

I still think this should work. The example given by Microsoft works:

https://msdn.microsoft.com/en-us/library/dn254939(v=vs.85).aspx

F11 key works in IE11. I will just have people use that as a last resort (but it kind of defeats the purpose of putting the fullscreen button on the page). I tried using a SendKeys command but that didn’t work either.

Does IE11 think that Xojo is in an iframe? I am not using any iframes on the page, just WebPage and WebHTMLViewer and WebButtons.

I hope one of you Xojo gurus can figure out what’s going on.

WebHTMLViewer is an iFrame.

Is a WebPage an iframe too? I did a demo with nothing on it but a button in a WebPage and it didn’t work.

If I figure out how to get this working I’ll let you know.

Here is the Microsoft example adapted to Xojo.

It works fine apparently in all browsers, but I noticed sometimes Edge window bar controls (minimize, close) were inactive when coming back to normal. You may want to use Session.Browser to apply this only to IE.

IE-FullScreen.xojo_binary_project

Do not forget either in your program to avoid showing the full screen button when a mobile browser is used. They are all full screen as default.

BTW full screen works fine when a WebHTMLViewer is present as well.

Michel, as always, you are extremely helpful. I really appreciate it. This helped me pinpoint the problem.

The reason it wasn’t working in IE 11 is because, apparently, there is a glitch in IE 11 (Version 11.0.9600.17959, Update Version 11.0.22) that prevents the onmousedown event from working.

https://github.com/timmywil/jquery.panzoom/issues/133

If I use the onlick event, it works in IE. Damn I hate IE.