代码之家 › 专栏 › 技术社区 › Dave Pearce

为iframe弹出窗口设置cookie以使其保持关闭状态

typeform jquery-cookie cookies iframe javascript

Dave Pearce · 技术社区 · 8 年前

我正在使用TypeForm来处理潜在客户开发表单。我使用的表单已嵌入到我的网站主页上。此嵌入创建一个iframe,在每次加载主页时显示弹出窗口,即使单击“X”。

联系TypeForm后,我被告知需要设置一个cookie来防止每次加载弹出窗口。事实上,他们的回答是“为了确保字体只出现一次,你必须向你的网站添加cookie,以确保用户只看到一次。这不是我们目前拥有的功能,但希望有更多的请求,我们可以添加它!”

嵌入代码:

<a class="typeform-share button" href="https://example.typeform.com/to/fbPnzs" data-mode="drawer_left" data-auto-open=true target="_blank" style="display:none;"></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>

嵌入URL就是一个例子。打印格式。com,而嵌入表单的网站则不同。是否需要考虑相同的来源?

我需要在函数的代码方面实现什么。我的WordPress站点的php文件添加了一个cookie,允许弹出窗口只显示一次和/或在单击“X”时不再显示?

2 回复 | 直到 8 年前

Dave Pearce 8 年前

感谢尼古拉斯的回答!

检查了SDK之后,我修改了Nicolas的代码片段,以适应左侧的draw弹出窗口。这将检查cookie是否存在,如果不存在,则应对其进行设置并显示左侧的draw TypeForm弹出窗口;如果cookie确实存在,则不会显示。

var url = "https://demo.typeform.com/to/njdbt5" // Update with your TypeForm URL
let params = new URLSearchParams( location.search );
url += "?utm_source=" + params.get( 'utm_source' ); // Replace with the hidden values you want to pass

var displayed = getCookie( "typeform_displayed" ); // Check for the cookie typeform_displayed
if ( displayed ) {
    null
} else if ( !displayed && displayed === "" ) {
    setCookie( "typeform_displayed", true, 365 ); // Set typeform_displayed cookie with a value of true and an expiry of 365 days
    showEmbed();
}

//
function showEmbed() {
    window.typeformEmbed.makePopup( url, {
        mode: 'drawer_left',
        autoOpen: true,
        hideHeaders: true,
        hideFooters: true,
    } )
}

// Cookie Manipulation
// Source: https://www.w3schools.com/js/js_cookies.asp
function setCookie( cname, cvalue, exdays ) {
    var d = new Date();
    d.setTime( d.getTime() + ( exdays * 24 * 60 * 60 * 1000 ) );
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie( cname ) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent( document.cookie );
    var ca = decodedCookie.split( ';' );
    for ( var i = 0; i < ca.length; i++ ) {
        var c = ca[ i ];
        while ( c.charAt( 0 ) == ' ' ) {
            c = c.substring( 1 );
        }
        if ( c.indexOf( name ) == 0 ) {
            return c.substring( name.length, c.length );
        }
    }
    return "";
}

picsoung 8 年前

我认为使用 Typeform Embed SDK 。

您需要检查cookie是否已设置。和取决于值显示与否的嵌入类型。

我做了一个关于故障的工作示例,你可以看看 here 。

在代码中,逻辑如下所示:

var displayed = getCookie("displayed_typeform");

if (displayed){
  embedElement.innerHTML="<h2>Typeform already displayed once.</h2>"
} else if (!displayed && displayed === "") {
  setCookie("displayed_typeform", true, 365);
  showEmbed();
}

希望有帮助:)