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

Question

我尝试在 AMP 页面 中 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" 因为它只是告诉兄弟它是由文本组成的而不是执行！

这是醒着的：

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

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

Best way to include custom JavaScript in AMP

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

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

How to show element after 3 seconds in AMP page?

html

javascript

css

amp-html