turbo_frame_history_controller.ts

// DISCLAIMER : You can now probably use `data-turbo-action="advance"` on your frame to perform what this controller is aiming to do 
// https://turbo.hotwired.dev/handbook/frames#promoting-a-frame-navigation-to-a-page-visit
// Note that you probably want to disable turbo cache as well for those page to make popstate work properly

import { navigator } from '@hotwired/turbo'
import { Controller } from '@hotwired/stimulus'
import { useMutation } from 'stimulus-use'

export default class extends Controller {
  connect (): void {
    useMutation(this, { attributes: true })
  }

  mutate (entries: MutationRecord[]): void {
    entries.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
        const src = this.element.getAttribute('src')
        if (src != null) {
          const url = new URL(src)
          navigator.view.lastRenderedLocation = url
          navigator.history.push(url)
        }
      }
    })
  }
}

Hi @Intrepidd, is this solution still needed with the new additions to hotwire?

Thanks for the hard work!

Thanks for challenging the status quo, actually I just discovered data-turbo-action introduce in v 7.2.0 appears to do the trick : https://turbo.hotwired.dev/handbook/frames#promoting-a-frame-navigation-to-a-page-visit

Hi @Intrepidd , It seems that the turbo-action advance updates the URL but it refreshes the whole page.
Also, have you seen issues on the history back button on your solution?

@michelson I don't experience the refreshing of the whole page with data-turbo-action="advance", maybe the refresh is caused by something specific to your app ?

And yes, I've seen issues with my solution when playing back and forth with the history, I'm glad I was able to drop it for a more native solution :)

Hi @Intrepidd, not sure why I get that behavior, what I have is a link outside the frame that is visiting the frame, like:

<a data-turbo-frame="conversation" href="...">link</a>
<turbo_frame_tag "conversation" data-turbo-action="advance" src="...">...</>

Could happen that the browser refresh is due because the link is outside the frame?