如何在AMP页面中显示3秒后的元素

Question

我试图在AMP页面中显示WhatsAppBaloon按钮3秒后，但仍然失败。我尝试在Chrome中的inspect元素中进行调试，但没有发现任何错误。

这是代码：

CSS:

<style amp-custom>
.hide {
display: none;
}
</style>

HTML:

...
<script id="script1" type="text/plain" target="amp-script">
setTimeout(function(){
document.getElementById('wabox').classList.remove('hide');
}, 3000);
</script>

<a id="wabox" rel="nofollow" 
href="https://api.whatsapp.com/send?phone=XXXXXX&text=Hi%2C%20I%20am%20Interested..." 
class="wafloat hide" target="_blank">
<i class="fa fa-whatsapp my-float gacontact wafloatx">      
<amp-img alt="Contact us" 
width="64"
height="64"                    
src="img/wa-min.webp">
</amp-img>  
</i>
</a>
...

知道吗？

提前感谢。。。

Answer 1

您应该从脚本声明中删除type="text/plain"，因为它只是告诉兄弟它是由文本组成的，而不是执行的！

这令人惊叹：

<script id="script1" type="text/javascript" target="amp-script">
setTimeout(function(){
document.getElementById('wabox').classList.remove('hide');
}, 3000);
</script>

然而，Javascript通常是网站速度慢的原因，因此AMP页面不允许使用它们。关于这个问题，你在这里有一个很好的答案：

在AMP 中包含自定义JavaScript的最佳方式

如图所示，您可以使用<amp-script>标记来让您的自定义脚本工作！