Wordpress Cookie每次访问时显示一定的代码/短代码

时间:2018-03-12 21:43:55

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

试图解决这个问题,这是一个愚蠢的行为。

基本上我有一个类型形式的弹出窗口显示一次特定页面以获得用户的反馈,但它每次加载时都会加载。

用户每次访问时都会看到一次。

我试了这个没有运气:

<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>

1 个答案:

答案 0 :(得分:0)

不太了解Typeform,但测试一下我发现你的代码出了什么问题。

首先,你应该把它包装成类似的东西:

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

现在,第二个也是最重要的一点是,Typeform不会在slider div中显示叠加或模态,而是放在页面末尾的新创建的div中。

enter image description here

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

因此,知道这一点,您应该将代码更改为:

&#13;
&#13;
$(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';

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

我测试了它,它适用于我。希望它也适合你。

相关问题