在AMP页面中添加Javascript

Question

请帮助我了解如何在AMP(加速移动页面)中添加javascript.我的要求是我在URL中获取ID.例如localhost:8080/home？id = 1.我想在我的html文件中访问该id.

或者请让我知道如何添加任何JavaScript文件.

谢谢.

Answer 1

不幸的是,您无法在AMP中添加任意脚本.根据规范,在"HTML标签"下为标签script:

禁止除非类型application/ld+json.(可以根据需要添加其他非可执行值.)例外是加载AMP运行时的必需脚本标记和加载扩展组件的脚本标记.

因此,如果您想使用AMP中的JavaScript,则必须使用AMP的预定义组件.我没有看到一个组件可以满足您的需求.

Answer 2

截至2019年4月11日官方公告，

现在可以在带有amp-script组件的 AMP 项目中使用您的 JS 。

首先，您需要将其导入到您的项目中：

1. 在.html文件导入的顶部：

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

2. html用amp-script组件包裹元素：

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

3. 现在您可以创建 JS 文件

// 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);
});

您可以在 AMP git repo amp-script.md 中找到更多详细信息及其工作原理