如何在 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>標簽，才能有你的自定義腳本的工作！