Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion _source/handbook/04_frames.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ While the overhead of fetching loading frames is generally very low, you should

## Targeting Navigation Into or Out of a Frame

By default, navigation within a frame will target just that frame. This is true for both following links and submitting forms. But navigation can drive the entire page instead of the enclosing frame by setting the target to `_top`. Or it can drive another named frame by setting the target to the ID of that frame.
By default, navigation within a frame will target just that frame. This is true for both following links and submitting forms. But navigation can drive the entire page instead of the enclosing frame by setting the target to `_top`, or target the closest ancestor frame by setting the target to `_parent`. It can also drive another named frame by setting the target to the ID of that frame.

In the example with the set-aside tray, the links within the tray point to individual emails. You don't want those links to look for frame tags that match the `set_aside_tray` ID. You want to navigate directly to that email. This is done by marking the tray frames with the `target` attribute:

Expand Down Expand Up @@ -161,6 +161,10 @@ Sometimes you want most links to operate within the frame context, but not other
<a href="/messages/1/permission" data-turbo-frame="_top">
Change permissions (replace the whole page)
</a>

<a href="/messages/1/stats" data-turbo-frame="_parent">
Show stats (navigate the parent frame)
</a>
</turbo-frame>

<form action="/messages/1/delete" data-turbo-frame="message_1">
Expand Down
8 changes: 7 additions & 1 deletion _source/reference/frames.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ Like an eager-loaded frame, but the content is not loaded from `src` until the f
Following link will replace the whole page, not this frame.
</a>

<a href="/messages/1" data-turbo-frame="_parent">
Following link will navigate the parent frame.
</a>

<form action="/messages" data-turbo-frame="navigation">
Submitting form will replace the navigation frame.
</form>
Expand Down Expand Up @@ -119,7 +123,9 @@ attributes and JavaScript properties.
present

* `target` refers to another `<turbo-frame>` element by ID to be navigated when
a descendant `<a>` is clicked. When `target="_top"`, navigate the window.
a descendant `<a>` is clicked. When `target="_top"`, navigate the window. When
`target="_parent"`, navigate the closest ancestor `<turbo-frame>` element. If
the element has no ancestor frame, it falls back to `_top` behavior.

* `complete` is a boolean attribute whose presence or absence indicates whether
or not the `<turbo-frame>` element has finished navigating.
Expand Down
Loading