复制按钮

简介

这是一个示例，展示如何向页面添加“复制”按钮，允许用户复制每个页面的某些固定项目。这使用了 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 中），我们可以从 vanilla JS 执行任何操作，包括复制。

该 iframe 允许在您的 AMP 上的任何位置加载，因为它有一个占位符，在我们的例子中，这个占位符与最终显示具有完全相同的呈现效果，因此当它被“交换出来”时并不明显。在加载之前将鼠标悬停在按钮上的用户将看到“禁用”指示器。

我们通过哈希传递要复制的数据。复印机“辅助”页面可以始终提供相同的 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