Google AMP 和自定义 Javascript

Question

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

才能完全可见。几个小时以来我一直在努力解决这个问题，甚至谷歌也无法帮助我解决这个问题。

控制台出现一堆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 运行良好。

有人可以解释一下吗？

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

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

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

Answer 2

0
投票

我在哪里寻找我的哈希码？

Google AMP 和自定义 Javascript

问题描述投票：0回答：2

2个回答

最新问题

Google AMP 和自定义 Javascript

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2