Как я могу выполнить JavaScript при загрузке нового турбо-кадра

Question

Я использую Turbo Frames в своем приложении Rails и на каждой странице

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

Это нормально загружается, и при нажатии на ссылку фрейм заменяется, как и ожидалось. В этом кадре я установил overflow-y: scroll, создавая на странице прокручиваемый фрейм. Каждый раз, когда во фрейме загружается новая страница, я хочу, чтобы она прокручивалась вниз. Как я могу этого добиться? В идеале с ванильным JavaScript.

Answer 1

Вы можете сделать это несколькими способами.

Турбо должен запустить 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))
  }
})

Источники: Турбо-события => https://turbo.hotwire.dev/reference/events

Frame.complete and Frame.loaded => https://turbo.hotwire.dev/reference/frames

---

I suggest the above method because you specified vanilla Javascript. The recommended way for most Turbo related things is to use StimulusJS.

You could write a Stimulus (https://stimulus.hotwire.dev/) controller that you attach to an element in the body that shows inside the TurboFrame, and in the connect method, do the same.

That way, whenever the content inside the frame is refreshed the Stimulus controller will run, and you don't have to worry about the order of the events being fired.