监听turbo:frame-load事件失效，请求技术排查

首先看你代码里的核心问题：

• Turbo Frame的HTML语法错误：你写的<turbo-frame id: "content">里，id属性的赋值符号用错了，应该是=而不是:，错误的语法会导致浏览器无法正确识别这个Turbo Frame元素，自然监听不到事件。

修正后的基础代码 #

HTML部分 #

<turbo-frame id="content">
</turbo-frame>

JS部分 #

要确保代码在DOM元素加载完成后执行，避免找不到元素的情况：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', () => {
  const contentFrame = document.getElementById('content');
  contentFrame.addEventListener('turbo:frame-load', (event) => {
    console.log('Hello New Content');
  });
});

额外排查点 #

如果修正后还是没效果，可以检查这几点：

• 确认页面已经正确引入Turbo脚本，没有加载失败的情况。
• 确保Turbo Frame确实有加载内容的动作（比如通过导航或者动态更新内容），turbo:frame-load只会在Frame内容加载完成后触发。
• 如果是Turbo Drive接管的页面，也可以尝试在turbo:load事件内绑定监听，确保Turbo初始化完成：

document.addEventListener('turbo:load', () => {
  const contentFrame = document.getElementById('content');
  if (contentFrame) {
    contentFrame.addEventListener('turbo:frame-load', (event) => {
      console.log('Hello New Content');
    });
  }
});

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