如何将JavaScript获取的div高度传递给TYPO3 Fluid变量？

核心前提：Fluid是服务端模板引擎，在页面发送到浏览器前就已完成渲染；而JS获取DOM高度是浏览器加载完页面后的客户端操作，两者无法直接赋值，必须通过「前端传值到后端 → 后端存储 → 模板读取」的流程实现。

具体实现步骤 #

1. 前端JS获取高度并通过AJAX提交到后端
   修正原JS代码，将获取到的高度通过AJAX发送到TYPO3后端的控制器动作：

   document.addEventListener("DOMContentLoaded", () => {
     const element = document.getElementById("c27");
     const divHeight = element.offsetHeight + "px";
     
     // 发送高度到TYPO3后端接口（替换为你实际的路由地址）
     fetch('/your-site-path/extension-key/controller/save-height', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
         'X-Requested-With': 'XMLHttpRequest'
       },
       body: `divSize=${encodeURIComponent(divHeight)}`
     })
     .then(response => response.json())
     .then(data => {
       if (data.success) {
         console.log('高度已成功提交到后端');
       }
     });
   });
   

2. 后端控制器接收并存储高度值
   在你的TYPO3扩展控制器中添加动作，接收前端传来的高度并存储到会话（Session）中，方便后续模板读取：

   /**
    * 接收并存储DOM高度
    * @param string $divSize
    * @return \Psr\Http\Message\ResponseInterface
    */
   public function saveHeightAction(string $divSize): \Psr\Http\Message\ResponseInterface
   {
     // 将高度存入会话
     $this->session->set('divSize', $divSize);
     
     // 返回JSON响应给前端
     return $this->jsonResponse(['success' => true]);
   }
   

   同时需在扩展的Routes.yaml中配置对应路由，确保前端能访问到该动作。

3. Fluid模板读取会话值并赋值变量
   在Fluid模板中读取会话存储的高度值，赋值给divSize变量：

   <!-- 读取会话中的高度，默认值设为auto以防未提交的情况 -->
   <f:variable name="divSize" value="{f:if(condition:'{session.divSize}', then:'{session.divSize}', else:'auto')}" />
   
   <!-- 示例：使用该变量设置元素样式 -->
   <div style="min-height: {divSize};">
     依赖高度的内容
   </div>
   

额外说明 #

• 如果只是需要在当前页面实时使用这个高度，无需传给Fluid变量，直接用JS操作DOM即可，比如document.getElementById('target').style.height = divHeight;
• 若要在页面首次渲染时就使用该高度，只能通过服务端预计算（比如根据内容、布局规则估算），因为此时DOM还未在客户端渲染，JS无法获取真实高度。

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