如何解决加载新的 Turbo Frame 时如何执行 JavaScript
我在 Rails 应用程序中使用 Turbo Frames,并且在每个页面上都有
<turbo-frame id="messagesFrame" src="/chats">
</turbo-frame>
这可以正常加载,并且当单击链接时会按预期替换框架。在这个框架中,我设置了 overflow-y: scroll
,在页面上创建了一个可滚动框架。每次在框架中加载新页面时,我都希望它滚动到底部。我怎样才能做到这一点?最好使用原生 JavaScript。
解决方法
您可以通过多种方式做到这一点。
当延迟加载帧或触发帧重新加载的链接时,Turbo 应在 turbo:before-fetch-request
上触发 turbo:before-fetch-response
和 document
。
你可以这样做:
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.hotwire.dev/reference/events
Frame.complete 和 Frame.loaded => https://turbo.hotwire.dev/reference/frames
我建议使用上述方法,因为您指定了 vanilla Javascript。大多数 Turbo 相关的推荐方法是使用 StimulusJS。
您可以编写一个 Stimulus (https://stimulus.hotwire.dev/) 控制器,将其附加到显示在 TurboFrame 内部的主体中的元素,并在 connect
方法中执行相同操作。
这样,每当框架内的内容刷新时,Stimulus 控制器就会运行,您不必担心触发事件的顺序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。