index.html

<!DOCTYPE html>
<html>
    <head>
        <title>iFrame Host</title>
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <div id="iframe_container" class="container">
            <h1>iFrame Host</h1>
            <!-- <iframe onload="init_iframe()" id="receiver" src=""></iframe> -->
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function() {

                let iframe_container = document.getElementById("iframe_container");
                window.addEventListener('message', receiveMessage, false);
                    
                function receiveMessage(event){
                    console.log("Received something from embedded iFrame: " + event.origin);
                    if(event.origin !== "https://iframehost.pages.dev")
                    return;
                    console.log("Setting value to local storage: " + event.data);
                    localStorage.setItem("cookie_value", event.data);
                }
                
                // A function to handle sending messages.
                function init_iframe() {
                    var iframe = document.createElement('iframe');
                    iframe.onload = function() {

                        const cookie_value = localStorage.getItem("cookie_value");
                        console.log("Attempting to initialize iframe value with local storage: " + cookie_value);
                    
                        if(cookie_value != null) {
                            this.contentWindow.postMessage(cookie_value, '*');
                        }
                    };
                    
                    iframe.src = 'https://iframehost.pages.dev'; 
                    iframe.id = 'receiver';
                    iframe_container.appendChild(iframe);
                    
                }

                init_iframe();
            
            });
        </script>
    </body>
</html>