如何在 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">&nbsp; &nbsp;setTimeout(function(){&nbsp; &nbsp; &nbsp; document.getElementById('wabox').classList.remove('hide');&nbsp; }, 3000);</script>然而，Javascript 通常是导致网站运行缓慢的原因，因此 AMP 页面不允许使用它们。关于这个问题，你在这里有一个很好的答案：在 AMP 中包含自定义 JavaScript 的最佳方式如此处所示，您可以使用<amp-script>标记来使您的自定义脚本正常工作！