如何渲染Rails Turbo Frame内容并移除标签修复下拉菜单

方法1：使用Turbo Stream替代Turbo Frame（推荐） #

Turbo Stream支持精确的DOM操作，不会引入额外包裹标签，完美适配Bootstrap下拉结构：

• 前端触发请求：将原Turbo Frame按钮改为触发Turbo Stream请求，指定目标容器：

<!-- 懒加载触发按钮 -->
<button type="button" class="dropdown-item" data-turbo-stream="true" data-url="<%= lazy_load_dropdown_path %>">
  加载更多菜单
</button>

<!-- 下拉菜单内容容器 -->
<div id="lazy-dropdown-content" class="dropdown-menu"></div>

• 服务器端返回Turbo Stream响应：在对应控制器动作中，创建turbo_stream格式模板，直接插入下拉内容：

# app/views/your_controller/lazy_load_dropdown.turbo_stream.erb
<%= turbo_stream.append "lazy-dropdown-content" do %>
  <!-- 直接编写Bootstrap下拉菜单原生HTML，无需Turbo Frame -->
  <a class="dropdown-item" href="#">子菜单1</a>
  <a class="dropdown-item" href="#">子菜单2</a>
  <div class="dropdown-divider"></div>
  <div class="dropdown-submenu">
    <a class="dropdown-item dropdown-toggle" href="#">多级子菜单</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">三级菜单</a>
    </div>
  </div>
<% end %>

加载完成后，内容直接插入目标容器，无额外标签，完全兼容Bootstrap下拉交互。

方法2：监听Turbo Frame加载事件移除标签 #

若需保留Turbo Frame触发逻辑，可在加载完成后手动替换Frame元素：

• 设置带ID的Turbo Frame：

<button type="button" class="dropdown-item" data-turbo-frame="lazy-dropdown-frame">
  加载更多菜单
</button>

<turbo-frame id="lazy-dropdown-frame" src="" class="d-none"></turbo-frame>

<!-- 下拉菜单目标容器 -->
<div id="dropdown-target"></div>

• 添加JavaScript监听事件：

document.addEventListener('turbo:frame-load', (event) => {
  const frame = event.target;
  if (frame.id !== 'lazy-dropdown-frame') return;

  const target = document.getElementById('dropdown-target');
  // 转移Frame内的内容到目标容器
  target.innerHTML = frame.innerHTML;
  // 移除Turbo Frame标签
  frame.remove();
  // 重新初始化Bootstrap下拉组件（多级菜单需此步骤）
  new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'));
});

方法3：手动使用Turbo Fetch API加载内容 #

通过Turbo的Fetch API发起请求，直接插入纯HTML内容：

• 前端按钮绑定点击事件：

<button type="button" class="dropdown-item" id="load-lazy-dropdown">
  加载更多菜单
</button>

<div id="dropdown-target" class="dropdown-menu"></div>

• JavaScript处理请求与插入：

document.getElementById('load-lazy-dropdown').addEventListener('click', async () => {
  const response = await Turbo.fetch('/lazy_load_dropdown', { responseType: 'html' });
  const html = await response.text();
  document.getElementById('dropdown-target').innerHTML = html;
  // 重新初始化Bootstrap下拉组件
  new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'));
});

• 服务器端返回纯HTML：
  控制器动作直接返回不含Turbo标签的下拉菜单HTML：

# app/views/your_controller/lazy_load_dropdown.html.erb
<a class="dropdown-item" href="#">子菜单1</a>
<a class="dropdown-item" href="#">子菜单2</a>
<div class="dropdown-divider"></div>
<div class="dropdown-submenu">
  <a class="dropdown-item dropdown-toggle" href="#">多级子菜单</a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">三级菜单</a>
  </div>
</div>

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