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

Question

我尝试在AMP Page 3 秒后显示WhatsApp气球按钮，但仍然失败。 我尝试在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"因为它只是告诉兄弟它是由文本组成的而不是执行的！

这是 woking ：

<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>标签，才能有你的自定义脚本的工作！