Google与定制Javascript
根据文档，我所需要做的就是将我想要通过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脚本：
<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运行得很好。
谁能把这件事弄清楚吗？
回答 1
Stack Overflow用户
发布于 2020-02-27 19:06:37
我强烈建议通过将#development=1添加到URL来启用AMP开发模式。
相对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>同样，开发参数将告诉您应该使用的哈希，尽管您也可以在开发期间禁用哈希检查。
以上所有内容仍将不会补充您的安培脚本元素。为了使元素水合物化，脚本必须实际添加到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仍然通过验证。
https://stackoverflow.com/questions/60416034
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号