Rails 7 Turbo环境下脚本加载问题：如何让脚本每次页面加载时运行？

问题核心在于Userway脚本加载后会在全局作用域创建持久化状态和DOM元素，Turbo页面切换时这些全局资源不会自动清除，再次加载脚本时会因检测到已有实例而跳过初始化流程。以下是修复后的Stimulus控制器实现：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 清理之前残留的Userway资源
    this.cleanupUserway()
    
    // 重新创建并加载脚本
    const script = document.createElement("script")
    script.setAttribute("data-account", "azj4WdAV8Nq")
    script.setAttribute("src", "https://cdn.userway.org/widget.js")
    script.async = true
    document.body.appendChild(script)
  }

  cleanupUserway() {
    // 移除页面中已存在的Userway脚本标签
    const existingScript = document.querySelector('script[src="https://cdn.userway.org/widget.js"]')
    if (existingScript) {
      existingScript.remove()
    }

    // 删除Userway生成的widget容器
    const widgetContainer = document.getElementById('userway-widget')
    if (widgetContainer) {
      widgetContainer.remove()
    }

    // 清除全局变量，强制脚本重新初始化
    if (window.userway) {
      delete window.userway
    }
  }

  // 页面切换时清理残留，避免内存泄漏
  disconnect() {
    this.cleanupUserway()
  }
}

关键注意点： #

• 强制初始化：通过清理全局变量和DOM残留，让新加载的脚本无法检测到旧实例，从而重新执行初始化逻辑。
• 控制器绑定：确保将该控制器绑定到每个页面的根元素（比如<body data-controller="userway">），这样Turbo每次切换页面后，Stimulus都会触发connect方法。
• 异步加载：给脚本添加async属性，避免阻塞页面渲染，同时保证脚本加载完成后能正常初始化。

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