[英]How to show element after 3 seconds in AMP page?
I try to show the WhatsApp
Baloon Button after 3 seconds in AMP Page , but it's still failed.我尝试在AMP Page 3 秒后显示
WhatsApp
气球按钮,但仍然失败。 I try to debug within inspect
element in Chrome
but nothing errors found.我尝试在
Chrome
inspect
元素中进行调试,但没有发现任何错误。
Here're the code:这是代码:
CSS: CSS:
<style amp-custom>
.hide {
display: none;
}
</style>
HTML: 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>
...
any idea?任何的想法?
Thank You in advance...先感谢您...
You should remove the type="text/plain"
from your script declaration as it just says to the brother that it is made of text and not executed !你应该从你的脚本声明中删除
type="text/plain"
因为它只是告诉兄弟它是由文本组成的而不是执行的!
This is woking :这是 woking :
<script id="script1" type="text/javascript" target="amp-script">
setTimeout(function(){
document.getElementById('wabox').classList.remove('hide');
}, 3000);
</script>
However, Javascript is often the cause of slow websites and so AMP pages do not allow them.但是,Javascript 通常是网站缓慢的原因,因此 AMP 页面不允许它们。 You have a pretty good answers here about this issue:
关于这个问题,你在这里有一个很好的答案:
Best way to include custom JavaScript in AMP 在 AMP 中包含自定义 JavaScript 的最佳方式
As seen here , you could use <amp-script>
tag in order to have your custom script working !正如所看到的在这里,你可以使用
<amp-script>
标签,才能有你的自定义脚本的工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.