要在 AMP 的頁面使用複製功能,先讀入這隻 js:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
接著像這樣配置就能複製內容了:
<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>
如果要讓使用者複製輸入內容,可以像這樣設置輸入欄位:
<span>
<input type="text" value="Hello World" on="input-debounced: AMP.setState({ textToCopy: event.value })">
<div>Copy the contents of the input</div>
</span>
按鈕的部分:
<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 官方的說明