框架

﹟ 基本框架

通过期望任何跟随的链接或表单提交返回包含匹配帧标记的响应，将所有导航限制在帧内

<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">
  Content will be replaced when /messages has been loaded.
</turbo-frame>

﹟ 延迟加载的帧

类似于急切加载的帧，但内容在帧可见之前不会从src加载。

<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">
    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">
    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">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 id="my-frame" refresh="morph">
  ...
</turbo-frame>

属性、特性和函数

<turbo-frame>元素是一个自定义元素，具有自己的一组 HTML 属性和 JavaScript 特性。

﹟ HTML 属性

src接受控制元素导航的 URL 或路径值
loading有两个有效的枚举值：“eager”和“lazy”。当loading="eager"时，对src属性的更改会立即导航元素。当loading="lazy"时，对src属性的更改会延迟导航，直到元素在视口中可见。默认值为eager。
busy是一个布尔属性，当由<turbo-frame>发起的请求开始时切换为存在，当请求结束时切换为 false
disabled 是一个布尔属性，当存在时可防止任何导航
target 通过 ID 引用另一个 <turbo-frame> 元素，当一个后代 <a> 被点击时导航到该元素。当 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"。

﹟ 属性

所有 <turbo-frame> 元素都可以通过 FrameElement 类的实例在 JavaScript 环境中进行控制。

FrameElement.src 控制要加载的路径名或 URL。设置 src 属性将立即导航元素。当 FrameElement.loaded 设置为 "lazy" 时，对 src 属性的更改将延迟导航，直到元素在视口中可见。
FrameElement.disabled 是一个布尔属性，用于控制元素是否加载
FrameElement.loading 控制框架加载其内容的样式（"eager" 或 "lazy"）。
FrameElement.loaded 引用 Promise 实例，该实例在 FrameElement 的当前导航完成后解析。
FrameElement.complete 是一个只读布尔属性，当 FrameElement 完成导航时设置为 true，否则设置为 false。
FrameElement.autoscroll 控制是否在加载后将元素滚动到视图中
FrameElement.isActive 是一个只读布尔属性，用于指示框架是否已加载并可以进行交互
FrameElement.isPreview 是一个只读布尔属性，当包含该元素的 document 是预览时，它返回 true。

﹟ 函数

FrameElement.reload() 是一个函数，它从其 src 重新加载框架元素。

下一步：流

框架