複製按鈕

簡介

本範例示範如何在您的網頁中新增「複製」按鈕，讓使用者能夠複製每個網頁上的特定項目。此範例使用 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