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.

---

Who are Dragon Drop?

Dragon Drop is a specialist web and app development agency. The team has extensive full-stack technical credentials and a strong focus on user experience.

The Dragon Drop founding team have over 40 years of web development and project experience. They have managed or developed over 100 significant ecommerce and web projects during their careers, including implementations for major UK high street retailers, financial services companies and government agencies.

Their approach to innovative solutions stems from perspectives gained as retailer, software supplier and web agency.