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?
I wrote a little Delphi procedure that can toggle FullScreen
in TMS WEB Core Websites.
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;
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;
You can use it by simply calling ToggleFullScreen()
in a button's onClick
event:
procedure TForm2.WebButton1Click(Sender: TObject);
begin
ToggleFullScreen();
end;