Question

使用AMP时是否可以将HTML动态添加到点击的网页上？

类似于

<button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp- 
bind"</button>

<div [text]="foo">This is the placeholder to append the new 
content</div>

而不是文本HTML？

Answer 1

您可以使用amp-script来实现。

https://github.com/ampproject/amphtml/blob/master/extensions/amp-script/amp-script.md

来自github：

<!-- hello-world.html -->
<amp-script layout="container" src="https://example.com/hello-world.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>


// hello-world.js
const button = document.getElementById('hello');
button.addEventListener('click', () => {
  const el = document.createElement('h1');
  el.textContent = 'Hello World!';
  // `document.body` is effectively the <amp-script> element.
  document.body.appendChild(el);
});

Answer 2

HTML的内容是提前知道的还是根据用户输入动态生成的吗？如果前者可以显示在页面中但不可见，则可以使用amp-bind和CSS控制其可见性。如果不是，则使用amp-script将是一个解决方案。请注意，它目前处于实验阶段。

在amp网页上点击时动态添加html

2 个答案: