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

Question

我正在使用 TypeForm 来处理我的潜在客户生成表单。我使用的表单已嵌入到我网站的主页中。此嵌入会创建一个 iframe，每次加载主页时都会显示弹出窗口，即使单击“X”也是如此。

在联系 TypeForm 后，我被告知我需要设置一个 cookie 以防止每次都加载弹出窗口。事实上，他们的回复是“为了确保 Typeform 仅出现一次，您必须将 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 是 example.typeform.com，而要嵌入表单的网站则不同。是否需要考虑同源？

我需要在我的 WordPress 网站的 functions.php 文件中实现什么代码来添加一个 cookie，允许弹出窗口只显示一次和/或如果单击“X”则不再显示？

Answer 1

感谢 Nicolas 的回答!

检查了 SDK 后，我修改了 Nicolas 的代码片段以适应左侧绘图弹出窗口。这将检查 cookie 是否存在，如果不存在，则应设置它并显示左侧绘制 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 "";
}