delphifullscreentmshtml5-fullscreentms-web-core

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


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?


Solution

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