包含 iframe

重要事項：本文件不適用於您目前選取的格式 stories！

瞭解如何在網頁中顯示包含的媒體內容，以及如何使用 iframe 顯示 AMP 限制以外的進階內容。

基本概念

您可以使用 amp-iframe 元素，在網頁中顯示 iframe。

在 AMP 中，iframe 特別適用於顯示主要網頁內容環境不支援的內容，例如需要使用者撰寫 JavaScript 的內容。

`amp-iframe` 的需求

必須與頂端保持至少 600 像素或第一個viewport 的 75% (使用 placeholder 的 iframe 除外)。
只能透過 HTTPS 要求資源，而且不得與容器位於相同來源，除非未指定 allow-same-origin。

繼續閱讀 – 在 amp-iframe 完整規格中瞭解詳情。

加入指令碼

如要在網頁中加入 amp-iframe，請先在 <head> 中加入以下指令碼，以便載入擴充元件的其他程式碼

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

撰寫標記

在以下範例中，我們建立了一個回應式 amp-iframe，透過 Google Maps Embed API 嵌入 Google 地圖

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe">
</amp-iframe>

使用預留位置

您可以在文件頂端顯示 amp-iframe，前提是 amp-iframe 包含具有 placeholder 屬性的元素 (例如，amp-img 元素)，該元素會以預留位置的形式呈現，直到 iframe 準備好顯示為止。

繼續閱讀 –：在使用預留位置的 Iframe 中瞭解更多關於預留位置的資訊。

使用預留位置的範例

<amp-iframe width="400" height="225"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    src="https://giphy.com/embed/OWabwoEn7ezug">
  <amp-img placeholder layout="fill"
      src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"></amp-img>
</amp-iframe>

呈現為

範例

您可以在 AMP 範例中找到更多進階的 amp-iframe 範例。

作者： @pbakaus
貢獻者： @Meggin 和 @bpaduch