Wordpress Cookie 每次访问显示一次特定代码/短代码答案

【问题标题】：Wordpress Cookie to show certain code / shortcode once per visitWordpress Cookie 每次访问显示一次特定代码/短代码
【发布时间】：2018-08-21 01:02:32
【问题描述】：

试图解决这个问题，结果很糟糕。

基本上，我有一个 typeform 弹出窗口显示一次特定页面以获取用户的反馈，但目前每次页面加载时都会加载。

宁愿用户每次访问只看到一次。

我试过这个没有运气：

<style type="text/css">
div#slider {
    /* Hide the div */
    display: none;
}

.typeform-share{
display:none;
}
</style>

<div class="slider"><a class="typeform-share button" href="https://sombees.typeform.com/to/xxxxx" data-mode="popup" data-auto-open=true data-hide-headers=true data-hide-footer=true data-submit-close-delay="0" target="_blank"> </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script></div>


<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
    var expiration = new Date();
    expiration.setDate(expiration.getDate()+1);
    document.cookie = 'visited=1;expires=' + expiration + ';path=/';

    var element = document.getElementById('slider');
    element.style.display = 'block';
}
</script>

【问题讨论】：

您是否检查过 Typeform Embed API (developer.typeform.com/embed)？使用它，您应该能够以编程方式显示或不显示弹出窗口。

标签： javascript wordpress cookies session-cookies browser-cache

【解决方案1】：

对Typeform了解不多，但测试一下我发现你的代码有什么问题。

所以首先你应该把它包装成这样的东西：

$(window).on('load', function(){ ... }

现在，第二个也是最重要的事情是 Typeform 不会在 slider div 中显示覆盖或模态，而是在它放置在页面末尾的新创建的 div 中。

就像你在上面的图片中看到的那样。在我的例子中，div 的类是.jktBHD，但这对你来说可能会有所不同。我不知道。

因此，知道这一点后，您应该将代码更改为以下内容：

$(window).on('load', function(){
    var cookie = document.cookie;
    if (cookie.indexOf('visited=', 0) == -1) {
        var expiration = new Date();
        expiration.setDate(expiration.getDate()+1);
        document.cookie = 'visited=1;expires=' + expiration + ';path=/';
        
        
        //
        // THE IMPORTANT PART
        //
        var element = document.querySelector('.jktBHD');
        element.style.display = 'block';

    }
})

<style type="text/css">
    .jktBHD {
        display: none;
    }
</style>

我对此进行了测试，它对我有用。希望它也对你有用。

【讨论】：