Google AMP 和自定义 Javascript

Question

根据 docs，我需要做的就是通过 Javascript 包装我想要 "talk to" 的块：

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

Javascript 文件在那里，我用一个简单的 console.log 进行了测试。然而 amp-script 标签具有 opacity: 0.7（AMP 默认样式）。显然，它需要 class 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>

轮播和 YouTube 运行良好。

有人可以解释一下吗？

Answer 1

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

URL 相对 URL 在 amp-script 标签的 src 属性中是不允许的（开发参数会告诉你这一点）。

虽然你可以有这样的东西：

<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>

请注意，您可以做的事情非常有限。例如，如果没有事件侦听器，上面的代码片段将无法运行，因此您不能在没有用户交互的情况下简单地添加元素。

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

Google AMP 和自定义 Javascript

Google AMP and custom Javascript

javascript

amp-html