CODEWITHSUNDEEP
javascriptcookies
user6275319
user6275319

Reputation:

Open iframe based on cookie value

I am trying to set up a piece of code so that an iframe only loads if the content of the cookie 'cookie_consent_user_accepted' = true.

I have managed to do this with other scripts but not iframe and am somewhat lost on where to start with an iframe.

Upvotes: 1

Views: 941

Answers (2)

Sagar V
Sagar V

Reputation: 12478

Procedure:

  1. Check if the cookie exists or not. Since the name and value of the cookie is constant, simply hardcode it to eliminate few of lines of code.

  2. a) If yes, hide the Accept Cookie button, create an iframe and append it to the container.
    b) If not, add an eventListener to the button and wait for user acceptance. Once user accept it, go to 2a.

Code:

Note: Stacksnippet won't support cookie because of security concerns so I'm not using the snippet here

// 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);
    }
}

Sample HTML

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

Create an EventListener for button#click

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

Attaching eventListener to the button

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

And check if the cookie exists on window load

checkCookie();

JSFiddle support cookies so I created a fiddle there. Here's the link

Upvotes: 1

Carlos
Carlos

Reputation: 376

You can hide it with style="display:none" and show it with javascript when the cookie is true

<body>
    <iframe id="customIframe" style="display:none" width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
<script>
    const getCookie = (name) => {
        return document.cookie.split('; ').reduce((r, v) => {
            const parts = v.split('=')
            return parts[0] === name ? decodeURIComponent(parts[1]) : r
        }, '')
    }

    function showIframe() {
        document.getElementById('customIframe').style.display = 'block';
    }

    function tryToShowIframe(){
        if(getCookie('cookie_consent_user_accepted') === 'true'){
            showIframe();
        }
    }

</script>

If you are using chrome or firefox, you can also check how to set a cookies listener so you can try to know when cookie_consent_user_accepted was set and show the iframe when that cookie is true. This solution is based on Chromium's chrome.cookies API so it does not work on Internet Explorer.

Upvotes: 0

Related Questions