複製按鈕

簡介

這是一個範例，展示如何在您的頁面中新增「複製」按鈕，讓使用者複製每個頁面上的某些固定項目。這使用了 amp-iframe，執行自訂 JS，在背景載入，同時保持顯示預留位置按鈕。

設定

我們使用 amp-iframe 載入複製按鈕，取代預留位置按鈕。

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

「複製」按鈕的運作方式

透過包含具有自訂 JS 的 amp-iframe (這在 /static/samples/files/copier.html 中)，我們可以執行任何來自原生 JS 的操作，包含複製。

iframe 允許載入在您 AMP 上的任何位置，因為它具有預留位置，在我們的案例中，此預留位置具有與最終顯示完全相同的呈現方式，因此在「換出」時不明顯。在按鈕載入前將滑鼠游標懸停在按鈕上的使用者將會看到「停用」指示器。

我們透過雜湊傳遞要複製的資料。複製器「helper」頁面可以始終提供相同的 HTML，並且可以獨立快取。

<amp-iframe sandbox="allow-scripts" width="64" height="42" frameborder="0" src="/static/samples/files/copier.html#This text was copied from amp.dev!">
  <button class="copy-button" placeholder disabled>Copy</button>
</amp-iframe>

動態變更要複製的值

我們可以使用 amp-bind 更新傳遞至複製器 iframe 的值。每當值變更時 (透過 input-debounced)，我們會更新 iframe 上的雜湊參數，以便複製器可以複製新值。

首先，我們定義一個輸入欄位，其會更新名為 textToCopy 的 amp-state 變數。

複製輸入的內容

<span>
  <input type="text" value="Hello World" on="input-debounced: AMP.setState({ textToCopy: event.value })">
  <div>Copy the contents of the input</div>
</span>

然後，我們將 iframe 的 src 屬性繫結至 textToCopy amp-state 變數的值。

<amp-iframe sandbox="allow-scripts" width="64" height="42" frameborder="0" src="/static/samples/files/copier.html#Hello World" [src]="'/static/samples/files/copier.html#' + textToCopy">
  <button class="copy-button" placeholder disabled>Copy</button>
</amp-iframe>

需要更多說明嗎？

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

前往 Stack Overflow

未說明的特性？

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

在 GitHub 上編輯範例

由 @samthor 撰寫