Turbo Rails中turbo:frame-load事件如何获取turbo-frame元素？

你遇到的问题是因为turbo:frame-load事件会向上冒泡，当你在document.documentElement上监听时，e.target指向的是事件冒泡的最终节点（也就是<html>），而非触发事件的<turbo-frame>元素。

解决方法很简单，Turbo在触发turbo:frame-load事件时，会把加载完成的目标<turbo-frame>元素存放在事件对象的detail.element属性里，直接读取这个属性即可：

document.documentElement.addEventListener('turbo:frame-load', function (e) {
  const targetFrame = e.detail.element;
  console.log(targetFrame); // 这里就是你需要的<turbo-frame>元素
});

如果你的<turbo-frame>是页面静态存在的元素，也可以直接在该元素上绑定事件监听，此时e.target就会直接指向当前<turbo-frame>：

// 替换成你的turbo-frame选择器
document.querySelector('turbo-frame#your-frame-id').addEventListener('turbo:frame-load', function (e) {
  console.log(e.target); // 直接输出当前turbo-frame元素
});

但如果<turbo-frame>是动态加载到页面中的，推荐使用第一种事件委托结合e.detail.element的方式，能确保所有动态生成的turbo-frame加载完成后都能触发你的逻辑。

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