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

Question

WhatsApp我尝试在AMP 页面3 秒后显示气球按钮，但仍然失败。我尝试在inspectelement in中进行调试Chrome，但没有发现任何错误。这是代码：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>标记来使您的自定义脚本正常工作！