How do I toggle FullScreen with a button in a TMS WEB Core Website?

Question

I'm making a TMS WEB Core website in Delphi where I want to have a button that toggles the website in and out of FullScreen (Like when you press F11 in a browser).

In FireMonkey, you have a FullScreen property on the form to do that and then in code in an FMX app, I can literally just do the following code for that:

MyForm.FullScreen := not(MyForm.FullScreen)

The TWebForm doesn't have a FullScreen property.

But how can I do this on a website in a browser using Delphi and TMS WEB Core?

Answer 1

I wrote a little Delphi procedure that can toggle FullScreen in TMS WEB Core Websites.

For Support on Modern Browsers only

The following code works on all modern browsers and is the recommended method:

procedure ToggleFullScreen();
begin
  asm
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  end;
end;

For Support on Older Browsers

If you need to support Internet Explorer and old versions of other browsers, then use the following code:

procedure ToggleFullScreen();
begin
  asm
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    } else {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    }
  end;
end;

---

How to use the procedure?

You can use it by simply calling ToggleFullScreen() in a button's onClick event:

procedure TForm2.WebButton1Click(Sender: TObject);
begin
  ToggleFullScreen();
end;