如何在TMS WEB Core网站中用按钮切换全屏模式？

TWebForm没有FireMonkey那样的FullScreen属性，要实现类似浏览器F11的全屏切换，需要调用浏览器原生的Fullscreen API，通过TMS WEB Core的JavaScript嵌入能力来实现。

实现步骤 #

1. 在你的TWebForm上添加一个TWebButton（例如命名为btnToggleFullScreen），初始Caption设为"进入全屏"。
2. 编写按钮点击事件的处理逻辑，结合JS API实现状态切换：

procedure TForm1.btnToggleFullScreenClick(Sender: TObject);
begin
  // 判断当前是否处于全屏状态
  if not asm document.fullscreenElement end then
  begin
    // 请求进入全屏，捕获可能的错误（如用户拒绝）
    asm
      document.documentElement.requestFullscreen().catch(err => {
        console.error('进入全屏失败:', err.message);
      });
    end;
    btnToggleFullScreen.Caption := '退出全屏';
  end
  else
  begin
    // 退出全屏
    asm
      document.exitFullscreen();
    end;
    btnToggleFullScreen.Caption := '进入全屏';
  end;
end;

3. 监听浏览器全屏状态变化事件，确保按钮文本与实际状态同步（比如用户按F11手动切换时）：

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  // 注册全屏状态变化监听
  asm
    document.addEventListener('fullscreenchange', () => {
      window.updateFullScreenBtnCaption();
    });
  end;
end;

// 供JavaScript调用的公开方法，更新按钮文本
procedure TForm1.updateFullScreenBtnCaption;
begin
  btnToggleFullScreen.Caption := IfThen(asm document.fullscreenElement end, '退出全屏', '进入全屏');
end;

注意事项 #

• 浏览器要求全屏请求必须由用户交互触发（如按钮点击），自动触发的全屏请求会被浏览器阻止。
• 部分浏览器仅在HTTPS环境下支持Fullscreen API，本地开发的http://localhost不受此限制。
• 可以根据需求添加错误提示，比如在catch块中显示弹窗告知用户进入全屏失败。

内容的提问来源于stack exchange，提问作者Shaun Roselt