当加载新的Turbo Frame时，我如何执行JavaScript

Question

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

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

这会很好地加载，并且当单击链接时会按预期替换框架。在这个框架中，我设置了overflow-y: scroll，在页面上创建了一个可滚动的框架。每次在框架中加载新页面时，我都希望它滚动到底部。我怎样才能做到这一点？非常适合使用香草JavaScript。

Answer 1

您可以通过多种方式来实现这一点。

当延迟加载帧或触发帧重新加载的链接时，Turbo应在document上激发turbo:before-fetch-request和turbo:before-fetch-response。

你可以做一些类似的事情：

document.addEventListener("turbo:before-fetch-response", function (e) {
  let frame = document.getElementById("messagesFrame");
  if (frame.complete) {
   frame.scrollTo(0, frame.scrollHeight)
  } else {
    frame.loaded.then(() => frame.scrollTo(0, frame.scrollHeight))
  }
})

来源：Turbo事件=>https://turbo.hotwired.dev/reference/events

Frame.complete和Frame.loaded=>https://turbo.hotwired.dev/reference/frames

---

我建议使用上述方法，因为您指定了香草Javascript。对于大多数与Turbo相关的事情，建议使用StimulusJS。

你可以写一个刺激计划(https://stimulus.hotwired.dev/)控制器，该控制器附加到显示在TurboFrame内部的主体中的元素，并且在connect方法中，执行相同的操作。

这样，每当刷新帧内的内容时，Stimulus控制器就会运行，您就不必担心触发事件的顺序。