Rails 7 Stimulus Turbo导航时Klaviyo外部脚本不执行问题

你遇到的问题是Turbo/Turbolinks无刷新导航的核心机制导致的：无刷新跳转时浏览器不会做全量页面重载，只会替换DOM中的页面内容块，已经加载过的外链JS不会重复执行。Klaviyo的官方脚本默认只在首次全量加载时执行一次DOM扫描，找到对应class的挂载节点后渲染表单；后续无刷新导航时，页脚的挂载节点随着DOM替换成了新的空节点，但Klaviyo脚本已经驻留全局，不会主动重新扫描DOM渲染表单，所以就会出现表单消失、手动刷新才恢复的情况。
你之前尝试的把脚本放head/body末尾、加defer/async、加data-turbolinks-track='reload'都没用，是因为这些配置只能控制脚本本身的加载时机和缓存重载逻辑，根本没有触发Klaviyo的重渲染流程。

方案1：Stimulus控制器实现（推荐，符合Rails 7技术栈规范） #

• 第一步：先把原来直接硬编码在布局文件里的Klaviyo静态script标签删掉，不要在head/body中直接放固定脚本引用
• 第二步：新建Stimulus控制器，路径为app/javascript/controllers/klaviyo_subscribe_controller.js，写入以下代码：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 全局Klaviyo对象未初始化时动态加载脚本，已初始化则直接触发渲染
    if (!window._klOnsite) {
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=替换为你的Klaviyo公司ID'
      script.onload = () => {
        window._klOnsite.forms.buildForms()
      }
      document.head.appendChild(script)
    } else {
      // 每次控制器挂载时主动触发Klaviyo扫描DOM渲染表单
      window._klOnsite.forms.buildForms()
    }
  }
}

• 第三步：给页脚的表单挂载节点绑定控制器，修改原挂载节点代码：

<div data-controller="klaviyo-subscribe" class="klaviyo-form-替换为你的表单ID"></div>

注意：把代码里的公司ID、表单ID替换为你Klaviyo后台生成的实际值即可。
这个方案利用Stimulus的connect生命周期特性：不管是首次全量加载还是后续Turbo无刷新导航，只要挂载节点出现在DOM树中，控制器就会自动执行逻辑，脚本只会全局加载一次，不会重复请求资源，完全不影响无刷新导航的性能。

方案2：全局监听Turbo渲染事件实现（无需新增Stimulus控制器） #

如果不想单独写Stimulus控制器，可以直接在JS入口文件（默认路径app/javascript/application.js）中添加事件监听，兼容Turbo和老版本Turbolinks的渲染完成回调：

// 监听两种无刷新导航的页面加载完成事件
document.addEventListener('turbo:load', renderKlaviyoForm)
document.addEventListener('turbolinks:load', renderKlaviyoForm)

function renderKlaviyoForm() {
  if (!window._klOnsite) {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    script.src = 'https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=替换为你的Klaviyo公司ID'
    script.onload = () => {
      window._klOnsite.forms.buildForms()
    }
    document.head.appendChild(script)
  } else {
    window._klOnsite.forms.buildForms()
  }
}

这种方案实现更直接，但全局事件监听会在每次页面导航时都触发判断，性能略低于Stimulus按需触发的方案，适合不想修改DOM节点属性的场景。

• 不要给Klaviyo脚本加data-turbolinks-track="reload"，该配置会强制每次导航都重新下载整个Klaviyo脚本，拖慢页面加载速度，还容易引发全局对象重复初始化的报错。
• 不要为了这个功能给页脚或者整页加data-turbo="false"，那样会完全丧失无刷新导航的性能优势，没有必要。
• 如果遇到页面切换后表单重复渲染的问题，可以在调用buildForms()之前先执行this.element.innerHTML = ''（Stimulus方案）清空挂载节点内容，再触发渲染即可。

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