Rails Turbo页面重定向移除Hubspot注入HTML该如何解决？

核心原因 #

data-turbo="false" 仅作用于触发导航的链接/表单元素，作用是告诉Turbo不要对该元素的跳转做AJAX接管，不会阻止Turbo导航时替换整个<body>内容，所以包裹注入区域无法生效。

可行方案 #

方案1：使用Turbo永久元素保留注入节点 #

Turbo提供了data-turbo-permanent属性，标记了该属性的DOM节点在Turbo导航替换页面内容时会被保留，不会被新页面的内容覆盖，是成本最低的解决方案。
你需要提前在全局布局文件（通常是app/views/layouts/application.html.erb）的<body>最底部预留Hubspot的挂载节点并标记为永久：

<!-- app/views/layouts/application.html.erb -->
<body>
  <%= yield %>
  <!-- 提前预留Hubspot注入容器，标记为永久保留 -->
  <div id="hubspot-conversations-container" data-turbo-permanent></div>
</body>

之后修改Hubspot的初始化脚本，指定挂载到你预留的容器即可，避免脚本自动注入到body根节点被替换。

方案2：监听Turbo生命周期事件重新初始化 #

如果无法指定Hubspot的挂载容器，可以监听Turbo的turbo:load事件，每次Turbo导航完成后检查页面是否存在Hubspot聊天节点，如果不存在则重新触发初始化：

// app/javascript/application.js
document.addEventListener('turbo:load', () => {
  // 检查Hubspot聊天组件是否存在
  if (!document.querySelector('#hubspot-messenger-wrapper')) {
    // 重新执行Hubspot初始化逻辑
    if (window.hsConversations) {
      window.hsConversations.init();
    } else {
      // 如果脚本也被清理，重新注入Hubspot脚本
      const script = document.createElement('script');
      script.src = 'https://js.hs-conversations.com/替换为你的Hubspot标识.js';
      script.async = true;
      document.body.appendChild(script);
    }
  }
})

方案3：将Hubspot脚本放在head区域 #

Turbo导航时默认只会更新head中变化的部分，不会全量替换head内容，你可以把Hubspot的初始化脚本放在<head>标签中，同时配置脚本初始化时自动检测节点状态，避免重复初始化。

注意事项 #

• 不要把第三方注入脚本放在<body>内部的yield区域，避免被Turbo导航替换
• 使用data-turbo-permanent时要保证元素的id全局唯一，否则Turbo无法正确识别保留节点

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