加载新的Turbo帧时，如何执行JavaScript

我在Rails应用程序中使用Turbo Frames，在每个页面上都有

<turbo-frame id="messagesFrame" src="/chats">
</turbo-frame>

---

这会很好地加载，单击链接时会按预期替换帧。在这个框架中，我设置了

overflow-y:scroll

，在页面上创建了一个可滚动的框架。每次在框架中加载新页面时，我都希望它滚动到底部。我怎样才能做到这一点？理想的情况是使用香草JavaScript。

您可以通过几种方法来实现这一点

当延迟加载帧或触发帧重新加载的链接时，Turbo应在

文档上触发
Turbo:before fetch请求
和
Turbo:before fetch响应

你可以这样做：

document.addEventListener（“turbo:在获取响应之前”，函数（e）{
让frame=document.getElementById（“messagesFrame”）；
如果（帧完成）{
frame.scrollTo（0，frame.scrollHeight）
}否则{
frame.loaded.then（（）=>frame.scrollTo（0，frame.scrollHeight））
}
})

资料来源：
Turbo事件=>

Frame.complete和Frame.loaded=>


我建议使用上述方法，因为您指定了香草Javascript。对于大多数与涡轮相关的事情，推荐的方法是使用刺激

您可以编写一个stimulation（）控制器，将其附加到主体中显示在TurboFrame内部的元素，并在
connect
方法中执行相同的操作

这样，无论何时刷新帧内的内容，刺激控制器都将运行，您不必担心触发事件的顺序。
谢谢！选择刺激版本（只是为了避免JQuery，这是新的，并且忘记了刺激的存在），但是代码抛出“frame.loaded是未定义的”。如果我去掉If语句，只运行scrollTo（），它工作得很好，If语句只是为了确保它首先被加载吗？出于某种原因，它还在页面顶部附近注入了大量空白：-\n不确定是什么，但我所做的各种CSS更改似乎已经消除了空白问题。是的，取决于您运行的turbo/hotwire的版本。在最新版本（beta-5）中，
loaded
是一个属性，它返回一个承诺，在帧完成加载时解析。在帧内容中使用刺激控制器时，不应该需要
if
语句，因为控制器仅在帧完成加载时运行：）