フレーム
﹟ 基本フレーム
フレーム内にある、リンク先または送信したフォームのレスポンスにこのフレームとマッチするフレームタグが含まれていることを期待し、フレーム内の全ナビゲーションを制限しています。
<turbo-frame id="messages">
<a href="/messages/expanded">
このフレームに、展開されたメッセージをすべて表示する。
</a>
<form action="/messages">
このフレームに、フォームからの応答を表示する。
</form>
</turbo-frame>
原文
Frames
﹟ Basic frame
Confines all navigation within the frame by expecting any followed link or form submission to return a response including a matching frame tag:
<turbo-frame id="messages">
<a href="/messages/expanded">
Show all expanded messages in this frame.
</a>
<form action="/messages">
Show response from this form within this frame.
</form>
</turbo-frame>
﹟ フレームの事前読み込み
基本的なフレームと同じように動作しますが、コンテンツはまずリモートのsrc
から読み込まれます。
<turbo-frame id="messages" src="/messages">
コンテンツは、/messagesが読み込まれたときに置き換えられます。
</turbo-frame>
原文
﹟ Eager-loaded frame
Works like the basic frame, but the content is loaded from a remote src
first.
<turbo-frame id="messages" src="/messages">
Content will be replaced when /messages has been loaded.
</turbo-frame>
﹟ フレームの遅延読み込み
フレームの事前読み込みに似ていますが、フレームが表示されるまでコンテンツはsrc
から読み込まれません。
<turbo-frame id="messages" src="/messages" loading="lazy">
このフレームが表示され、/messagesが読み込まれると、コンテンツは置き換えられます。
</turbo-frame>
原文
﹟ Lazy-loaded frame
Like an eager-loaded frame, but the content is not loaded from src
until the frame is visible.
<turbo-frame id="messages" src="/messages" loading="lazy">
Content will be replaced when the frame becomes visible and /messages has been loaded.
</turbo-frame>
﹟ デフォルトでページ全体を対象とするフレーム
<turbo-frame id="messages" target="_top">
<a href="/messages/1">
このリンクは、このフレームではなく、ページ全体を置き換えます。
</a>
<a href="/messages/1" data-turbo-frame="_self">
このリンクは、このフレームだけを置き換えます。
</a>
<form action="/messages">
フォームの送信は、このフレームではなく、ページ全体を置き換えます。
</form>
</turbo-frame>
原文
﹟ Frame targeting the whole page by default
<turbo-frame id="messages" target="_top">
<a href="/messages/1">
Following link will replace the whole page, not this frame.
</a>
<a href="/messages/1" data-turbo-frame="_self">
Following link will replace just this frame.
</a>
<form action="/messages">
Submitting form will replace the whole page, not this frame.
</form>
</turbo-frame>
﹟ ナビゲーションターゲットが上書きされたフレーム
<turbo-frame id="messages">
<a href="/messages/1">
このリンクは、このフレームを置き換えます。
</a>
<a href="/messages/1" data-turbo-frame="_top">
このリンクは、このフレームではなく、ページ全体を置き換えます。
</a>
<form action="/messages" data-turbo-frame="navigation">
フォームの送信は、このフレームではなく、idが navigationのフレームを置き換えます。
</form>
</turbo-frame>
原文
﹟ Frame with overwritten navigation targets
<turbo-frame id="messages">
<a href="/messages/1">
Following link will replace this frame.
</a>
<a href="/messages/1" data-turbo-frame="_top">
Following link will replace the whole page, not this frame.
</a>
<form action="/messages" data-turbo-frame="navigation">
Submitting form will replace the navigation frame.
</form>
</turbo-frame>
﹟ ページ遷移をナビゲーションしやすくするフレーム
<turbo-frame id="messages" data-turbo-action="advance">
<a href="/messages?page=2">
ブラウザ履歴を次のページへ進めます
</a>
<a href="/messages?page=2" data-turbo-action="replace">
ブラウザ履歴を次のページに置き換えます
</a>
</turbo-frame>
原文
﹟ Frame that promotes navigations to Visits
<turbo-frame id="messages" data-turbo-action="advance">
<a href="/messages?page=2">Advance history to next page</a>
<a href="/messages?page=2" data-turbo-action="replace">Replace history with next page</a>
</turbo-frame>
属性、プロパティ、関数
<turbo-frame>
要素は、独自のHTML属性とJavaScriptプロパティを持つカスタム要素です。
原文
Attributes, properties, and functions
The <turbo-frame>
element is a custom element with its own set of HTML
attributes and JavaScript properties.
﹟ HTML属性
src
は、要素のナビゲーションをコントロールするURLまたはパスを受け付けます。loading
は列挙属性で、"eager"
と"lazy"
を指定できます。"eager"
を指定した場合は、src
属性の値へすぐに遷移します。lazy
を指定した場合は、src
属性の値への遷移は、要素がビューポートに表示されるまで遅れます。デフォルト値は"eager"
です。busy
は真偽属性で、<turbo-frame>
によるリクエストが開始されたときにtrue
、終了したときにfalse
になります。disabled
は真偽属性で、この属性があるとナビゲーションができなくなります。target
には、子孫の<a>
がクリックされたときに遷移する別の<turbo-frame>
要素をIDで指定します。target="_top"
の場合、ページ全体が遷移します。complete
は真偽属性で、<turbo-frame>
要素がナビゲーションを終了したかどうかを示します。autoscroll
は真偽属性で、読み込み後に<turbo-frame>
要素(および、その子孫の<turbo-frame>
要素)をスクロールして表示するかどうかをコントロールします。data-autoscroll-block
属性に、Element.scrollIntoView({ block: “…” })で有効な"end"
、"start"
、"center"
、"nearest"
のどれかを指定することで、垂直方向のスクロールをコントロールします。data-autoscroll-block
属性がない場合、デフォルト値は"end"
です。data-autoscroll-behavior
属性に、Element.scrollIntoView({ behavior: “…” })で有効な"auto"
、"smooth"
のどれかを指定することで、スクロールの振る舞いをコントロールします。data-autoscroll-behavior
属性がない場合、デフォルト値は"auto"
です。
原文
﹟ HTML Attributes
-
src
accepts a URL or path value that controls navigation of the element -
loading
has two valid enumerated values: “eager” and “lazy”. Whenloading="eager"
, changes to thesrc
attribute will immediately navigate the element. Whenloading="lazy"
, changes to thesrc
attribute will defer navigation until the element is visible in the viewport. The default value iseager
. -
busy
is a boolean attribute toggled to be present when a<turbo-frame>
-initiated request starts, and toggled false when the request ends -
disabled
is a boolean attribute that prevents any navigation when present -
target
refers to another<turbo-frame>
element by ID to be navigated when a descendant<a>
is clicked. Whentarget="_top"
, navigate the window. -
complete
is a boolean attribute whose presence or absence indicates whether or not the<turbo-frame>
element has finished navigating. -
autoscroll
is a boolean attribute that controls whether or not to scroll a<turbo-frame>
element (and its descendant<turbo-frame>
elements) into view when after loading. Control the scroll’s vertical alignment by setting thedata-autoscroll-block
attribute to a valid Element.scrollIntoView({ block: “…” }) value: one of"end"
,"start"
,"center"
, or"nearest"
. Whendata-autoscroll-block
is absent, the default value is"end"
. Control the scroll’s behavior by setting thedata-autoscroll-behavior
attribute to a valid Element.scrollIntoView({ behavior: “…” }) value: one of"auto"
, or"smooth"
. Whendata-autoscroll-behavior
is absent, the default value is"auto"
.
﹟ プロパティ
すべての<turbo-frame>
要素は、FrameElement
クラスのインスタンスを通してJavaScript環境でコントロールされます。
FrameElement.src
は、読み込むパス名またはURLをコントロールします。src
プロパティを設定すると、要素はすぐに遷移します。FrameElement.loaded
が"lazy"
の場合、src
プロパティの変更は、要素の遷移をビューポートに表示されるまで遅らせます。FrameElement.disabled
は真偽値のプロパティで、要素を読み込むかどうかをコントロールします。FrameElement.loading
は、フレームがコンテンツを読み込むスタイル("eager"
または"lazy"
)をコントロールします。FrameElement.loaded
で、FrameElement
の遷移が完了した後に解決されるPromiseインスタンスを参照できます。FrameElement.complete
は読み取り専用の真偽値プロパティで、FrameElement
の遷移が終了した時にtrue
に設定され、そうでなければfalse
に設定されます。FrameElement.autoscroll
は、一度読み込まれた要素をスクロールするかどうかをコントロールします。FrameElement.isActive
は読み取り専用の真偽値プロパティで、フレームが読み込まれインタラクションできる状態になっているかどうかを示します。FrameElement.isPreview
は読み取り専用の真偽値プロパティで、要素を含むdocument
がプレビューである場合にtrue
を返します。
原文
﹟ Properties
All <turbo-frame>
elements can be controlled in JavaScript environments
through instances of the FrameElement
class.
-
FrameElement.src
controls the pathname or URL to be loaded. Setting thesrc
property will immediately navigate the element. WhenFrameElement.loaded
is set to"lazy"
, changes to thesrc
property will defer navigation until the element is visible in the viewport. -
FrameElement.disabled
is a boolean property that controls whether or not the element will load -
FrameElement.loading
controls the style (either"eager"
or"lazy"
) that the frame will loading its content. -
FrameElement.loaded
references a Promise instance that resolves once theFrameElement
’s current navigation has completed. -
FrameElement.complete
is a read-only boolean property set totrue
when theFrameElement
has finished navigating andfalse
otherwise. -
FrameElement.autoscroll
controls whether or not to scroll the element into view once loaded -
FrameElement.isActive
is a read-only boolean property that indicates whether or not the frame is loaded and ready to be interacted with -
FrameElement.isPreview
is a read-only boolean property that returnstrue
when thedocument
that contains the element is a preview.
﹟ 関数
FrameElement.reload()
は、フレーム要素をそのsrc
からリロードする関数です。
原文
﹟ Functions
FrameElement.reload()
is a function that reloads the frame element from itssrc
.