javascript - Cookie 从 iframe javascript 设置为父窗口

Question

请任何人帮助我从javascript中的iframe在父窗口上设置cookie。如果可以的话，请提供一些相关的链接。例如：父页面具有域ABC.com

IFRAME 在指向XYZ.com的那个页面上，我想在 iframe 中编写一个脚本来在 ABC.com 上放置一个 cookie，即在父页面上。

Answer 1

您可以使用 postMessage 从子窗口（即 iFrame）发布，然后在父窗口监听事件。

  window.parent.postMessage("Value", "*");
  window.addEventListener();

这篇文章可能会帮助您了解更多。 如何跨域使用 window.postMessage？

Answer 2

这是你如何做到的。

iFrame 网站
在 iF​​rame 网站中粘贴以下代码：

<script>

    /* Sends a hello from the iframe to the parent */    
    parent.postMessage('hello_from_the_iframe', 'https://parentwebsite.com/');

</script>

父网站
将以下代码粘贴到嵌入 iFrame 的父网站中以设置 cookie：

<script> 

    window.addEventListener("message",function (e) { 

            /*Check if the iframe website is sending the message*/
            if(e.origin === 'https://iframewebsite.com'){ 

                    /*Check if you got a hello from the iframe*/
                    if(e.data === 'hello_from_the_iframe'){

                        /*Function to set Cookie*/
                        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=/";
                        }

                        /* Set the cookie 'set_my_cookie'*/
                        setCookie('set_my_cookie',1,365);

                        /* Get notification that the cookie is set*/
                        alert('cookie set');
                    }
            }
    },false);

</script>

您需要替换https://parentwebsite.com/为嵌入 iframe 的网站的域。

您还需要将 替换https://iframewebsite.com为 iFrame 的原点。如果您不知道 iFrame 的来源，只需将以下代码粘贴到 iFrame HTML 中，它将在警告框中向您显示来源。

<script>
    alert(window.location.origin);
</script>

希望这可以帮助。