复制按钮

简介

这是一个示例，展示如何向页面添加“复制”按钮，允许用户复制每个页面上的一些固定项。它使用一个 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 撰写