Google AMP 和自定义 Javascript答案

【问题标题】：Google AMP and custom JavascriptGoogle AMP 和自定义 Javascript
【发布时间】：2020-02-26 14:23:25
【问题描述】：

根据docs，我需要做的就是用这个包装我想通过Javascript“交谈”的块：

<amp-script layout="container" src="language-toggle.js">
    // Some basic HTML
</amp-script>

Javascript 文件在那里，我用一个简单的console.log 进行了测试。然而amp-script 标签有opacity: 0.7（AMP 默认样式）。显然，它需要类 i-amphtml-hydrated 才能完全可见。几个小时以来，我一直在努力解决这个问题，即使 Google 也无法帮助我解决这个问题。

控制台中有一堆ServiceWorker错误，也都是AMP产生的。我不知道它们为什么会出现或如何摆脱它们。整个 AMP 事情对我来说都是一团糟。

这些是我当前添加的 AMP 脚本：

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

Carousel 和 YouTube 运行良好。

有人能解释一下吗？

【问题讨论】：

我强烈建议通过在 URL 中添加 #development=1 来启用 AMP 开发模式。 amp-script 标记的 src 属性中不允许使用相对 URL。除此之外，我认为输出仅供参考，并不是真正的错误。他们的例子也是如此：amp.dev/documentation/examples/components/amp-script 仍然存在水合作用问题......

标签： javascript amp-html

【解决方案1】：

我强烈建议通过在 URL 中添加 #development=1 来启用 AMP 开发模式。

amp-script 标记的 src 属性中不允许使用相对 URL（开发参数会告诉您）。

你可以有这样的东西：

<amp-script  width="1" height="1" script="demo"></amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
</script>

但是你需要在你头脑中的元标记中匹配一个哈希：

<head>
  ...
<meta
  name="amp-script-src"
  content="sha384-hash"
/>
</head>

同样，开发参数会告诉您应该使用的哈希值，尽管您也可以在开发过程中禁用哈希值检查。

以上所有内容仍然无法为您的 amp-script 元素补充水分。为了使您的元素得到水合，脚本必须实际添加到 DOM 中，例如在单击按钮时添加 div：

<amp-script  layout="container" script="demo">
  <button id="hello">Add headline</button>
</amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
  const button = document.getElementById('hello');
  button.addEventListener('click', () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello World!';
    document.body.appendChild(h1);
  });
</script>

请注意，您可以做的事情非常有限。例如，上面的 sn-p 没有事件监听器就无法工作，所以你不能简单地添加一个没有用户交互的元素。

可以放心地忽略有关引用的消息 - AMP 示例完全相同，AMP 仍然通过验证。

【讨论】：