如何在TMS WEB Core网站中通过按钮切换到全屏模式-Delphi 大神网

欢迎加入全网最大Delphi 技术交流群 682628230

在开发TMS WEB Core网站时，有时需要实现一个按钮来切换网页的全屏模式（类似于浏览器中按下F11键的效果）。在FireMonkey中，可以通过设置表单的FullScreen属性来实现全屏切换，但在TMS WEB Core中，TWebForm并没有FullScreen属性。因此，我们需要使用JavaScript来实现这一功能。

以下是一个在TMS WEB Core中切换全屏模式的Delphi过程。这个过程利用了JavaScript的document.documentElement.requestFullscreen()和document.exitFullscreen()方法。

1. 现代浏览器支持的代码

以下代码适用于所有现代浏览器，是推荐的方法：

delphi复制

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

2. 旧版浏览器支持的代码

如果你需要支持Internet Explorer或其他旧版本浏览器，可以使用以下代码：

delphi复制

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;

你可以在按钮的onClick事件中调用ToggleFullScreen()过程来实现全屏切换：

delphi复制

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

现代浏览器支持的代码：
- document.fullscreenElement：检查当前是否处于全屏模式。
- document.documentElement.requestFullscreen()：进入全屏模式。
- document.exitFullscreen()：退出全屏模式。
旧版浏览器支持的代码：
- 由于不同浏览器的实现方式不同，需要检查多种属性和方法：
  - document.fullscreenElement、document.mozFullScreenElement、document.webkitFullscreenElement：检查是否处于全屏模式。
  - document.cancelFullScreen、document.mozCancelFullScreen、document.webkitCancelFullScreen：退出全屏模式。
  - document.documentElement.requestFullscreen、document.documentElement.mozRequestFullScreen、document.documentElement.webkitRequestFullscreen：进入全屏模式。