Using a Turboframe with a src can be a trap.

by John Norris

Using a Turboframe tag with a src will load the response of the src into the frame. E.g. this will load the leads page into the frame.

<turbo-frame id="leads" src="/leads"></turbo-frame>

Except it doesn’t. That’s very much what iframes used to do, but isn’t how Turboframes work.

What’s required in the response for this to work is a matching Turboframe tag.

<!-- leads/index.html.erb -->

<turbo-frame id="leads">
  <table>...
</turbo-frame>

It would be bad if missing out the matching Turboframe tag meant it just didn’t work, but it’s worse than that. If you don’t have a matching Turboframe tag in the response, Turbo doesn’t know what to do with the response so just gives you all of it, which in this case behaves like a full browser redirect to the leads page.

Update: this has been fixed

As shown in this Turbo PR this behaviour has now changed in later versions of Turbo:

Previously, when the response was missing its frame, we would trigger a turbo:frame-missing event, and then (provided that event wasn’t cancelled) perform a full page visit to the requested URL.

Post-PR they now:

Write a short error message into the frame, so that the problem is visible on the page.

Which is great news. You now get a Content Missing message instead.

---