TurboFrameHistoryController
Purpose
TurboFrames usually navigate independently of the browser URL, this controller allows you to update the browser URL and history when a TurboFrame navigates. If you have one main TurboFrame on your page that you want to link the browser navigation to, you can use this controller to keep the turbo-frame and browser history in sync, so that browser back and forward buttons work as expected, and refreshing the page maintains the current state of the frame.
Caveats
This obviously works best with a single TurboFrame on the page, if you have multiple TurboFrames using this controller to maintain browser history, and those frames have significantly different URLs, you may have some unexpected behavior as each frame navigation updates the browser history and URL to its own URL.
This controller requires Turbo/Hotwired to be installed and active on the page for it to work, and expects Turbo to be defined on the window object.
Actions
| Action | Purpose |
|---|---|
- | - |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
- | - | - |
Values
| Value | Type | Description | Default |
|---|---|---|---|
- | - | - | - |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
- | - | - | - |
Side Effects
None
How to Use
<turbo-frame id="frame" src="/frame" data-controller="turbo-frame-history" >
<!--This link would normally navigate the turbo frame, but the URL would be unchanged, with this controller, clicking the link will update -->
<!-- the browser URL to "yourwebsite.com/your-page?tag=foo&filter=bar" -->
<a href="?tag=foo&filter=bar"></a>
</turbo-frame>