amp-iframe

簡介

使用 amp-iframe 透過 iframe 將內容嵌入 AMP 檔案中。適用於顯示 AMP 尚未 (或尚不) 支援的內容。

我們在此範例中使用 Vimeo 嵌入，但任何類型的內容都適用。如果您有興趣在 AMP 中嵌入 Vimeo，建議您改用提供的 amp-vimeo 元件。

在標頭中匯入 amp-iframe 元件。

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

您可以使用 amp-bind 擴充功能來動態變更 iframe src。

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

初始視窗

iframe 必須距離頂端 600 像素以上，或不在捲動至頂端時視窗前 75% 的範圍內 (以較小者為準)。此範例可能無法運作，取決於您的螢幕寬度。在這種情況下，只會顯示載入指示器。

<amp-iframe width="500" height="281" title="Netflix House of Cards branding: The Stack" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/140261016">
</amp-iframe>

預留位置

您可以新增預留位置圖片，避免 600 像素距離頂端的限制。

<amp-iframe width="500" height="281" title="Netflix House of Cards branding: The Stack" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/140261016">
  <amp-img layout="fill" src="https://i.vimeocdn.com/video/536538454_640.webp" placeholder></amp-img>
</amp-iframe>

Giphy

以下是另一個 iframe 範例，嵌入來自 Giphy 的動畫 GIF。

<amp-iframe width="600" height="400" title="Animated dancing GIF from Giphy" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://giphy.com/embed/DKG1OhBUmxL4Q">
</amp-iframe>

Google 地圖

透過 Google Maps Embed API 嵌入 Google 地圖是可行的，並且需要 API 金鑰。請確認您的 API 金鑰允許來自 ampproject.org 網域的要求。

<amp-iframe width="600" height="400" title="Google map pin on Googleplex, Mountain View CA" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ">
</amp-iframe>

可調整大小的 iframe

amp-iframe 的一項重要功能是在執行階段調整 iframe 大小的能力。為了使此功能運作

amp-iframe 必須設定 allow-same-origin sandbox 屬性。
amp-iframe 必須使用 resizable 屬性定義。
amp-iframe 必須具有 overflow 子元素。
iframe 文件必須傳送 embed-size 要求

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*');

以下範例示範兩種調整大小的使用案例

載入時調整大小： iframe 大小最初透過 amp-iframe 版面配置設定為 150x150 像素。在頁面載入時，嵌入的 iframe 會將自身調整大小為 200x200 像素。
使用者互動時調整大小： 按下按鈕會將 iframe 調整大小為 300x300 像素。

點擊以顯示更多

<amp-iframe id="sample-resizable-iframe" title="Resizable iframe example from 200x200 to 300x300 " width="150" height="150" sandbox="allow-scripts allow-same-origin" resizable frameborder="0" src="https://preview.amp.dev/static/samples/files/resizable-iframe.html">
            <div overflow tabindex="0" role="button" aria-label="Show more">Click to show more</div>
</amp-iframe>

動態變更 iframe src

透過 amp-bind，可以使用 amp-iframe 變更嵌入之 iframe 的 src。

<amp-iframe id="amp-iframe" title="Cute dog video" width="500" height="281" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/183849543" [src]="myIframeUrl">
</amp-iframe>
<button on="tap:AMP.setState({ myIframeUrl: 'https://player.vimeo.com/video/185199565' })">Change src</button>

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的某項功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者： @sebastianbenz