javascript - 根据cookie值打开iframe

Question

我正在尝试设置一段代码，以便仅当 cookie 的内容 'cookie_consent_user_accepted' = true 时才加载 iframe。

我已经设法用其他脚本做到了这一点，但不是 iframe，我有点不知道从哪里开始使用 iframe。

Answer 1

程序:

1. 检查 cookie 是否存在。由于 cookie 的名称和值是不变的，只需对其进行硬编码即可减少几行代码。

2. a) 如果是，隐藏接受 Cookie 按钮，创建一个 iframe 并将其附加到容器。
   b) 如果没有，则向按钮添加一个eventListener 并等待用户接受。用户接受后，转到2a。

代码:

^{注意:出于安全考虑，Stacksnippet 将不支持 cookie，因此我不会在此处使用代码段}

// A function to check whether the cookie exists or not
function checkCookie(){

    // Checking if hardcoded cookie value exists in document.cookie
    if(document.cookie.indexOf('cookie_consent_user_accepted=true')!=-1){

        // If yes, remove message (along with the button and related stuff)
        document.querySelector('.message').remove();

        // Create iframe and append it to the container
        var iframe = document.createElement('iframe'); 
        iframe.src = "https://example.com";
        document.querySelector('.container').append(iframe);
    }
}

示例 HTML

<div class="container">
  <div class="message">
    Ok with cookies?
    <button class="btn">Yes</button>
  </div>
</div>

为 button#click 创建一个 EventListener

function acceptCookie(){
  document.cookie="cookie_consent_user_accepted = true";
  checkCookie();
}

将 eventListener 附加到 button

document.querySelector('.btn').addEventListener('click',acceptCookie);

并在窗口加载时检查 cookie 是否存在

checkCookie();

JSFiddle 支持 cookie，所以我在那里创建了一个 fiddle 。 Here's the link