复制按钮

简介

这是一个示例，展示如何在您的页面上添加“复制”按钮，允许用户复制每个页面上的一些固定项。这使用一个 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 上的任何位置，因为它有一个占位符，在我们的例子中，这个占位符与最终显示具有完全相同的呈现方式，因此在“替换”时并不明显。在按钮加载之前将鼠标悬停在其上的用户将看到“禁用”指示器。

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