时间戳

首页 > 解决方案 > 加载新的 Turbo Frame 时如何执行 JavaScript

javascript - 加载新的 Turbo Frame 时如何执行 JavaScript

问题描述

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

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

这可以很好地加载，并且当单击链接时会按预期替换框架。在这个框架中我已经设置overflow-y: scroll，在页面上创建一个可滚动的框架。每次在框架中加载新页面时，我都希望它滚动到底部。我怎样才能做到这一点？理想情况下使用原生 JavaScript。

标签： javascriptruby-on-railshotwire-railsturboturbo-frames

解决方案

您可以通过多种方式做到这一点。

Turbo 应该在延迟加载的帧或触发帧重新加载的链接上触发turbo:before-fetch-requestand 。turbo:before-fetch-responsedocument

您可以执行以下操作：

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

我建议使用上述方法，因为您指定了 vanilla Javascript。大多数与 Turbo 相关的事情的推荐方法是使用 StimulusJS。

您可以编写一个 Stimulus ( https://stimulus.hotwired.dev/ ) 控制器，将其附加到显示在 TurboFrame 内部的正文中的一个元素，并在connect方法中执行相同的操作。

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

推荐阅读