对我来说，我想实现一个双向握手，这意味着: 父窗口的加载速度比iframe快 iframe应该在准备好后立即与父窗口对话 -父节点已经准备好接收iframe消息并重播

此代码用于在iframe中使用[CSS自定义属性]设置白色标签 代码: iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

父

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

当然，您可以限制起源和文本，这很容易与代码一起工作 我发现下面这个例子很有帮助: [使用postMessage的跨域消息传递]

打开开始菜单 输入windows+R或打开“运行” 执行如下命令。

Chrome .exe——user-data-dir="C://Chrome dev session"——disable-web-security .exe

同源策略

你不能访问一个<iframe>与不同的起源使用JavaScript，这将是一个巨大的安全漏洞，如果你可以这样做。对于同源策略，浏览器会阻止试图访问具有不同起源的帧的脚本。

如果地址中至少有以下部分未被维护，则认为来源不同:

protocol://hostname:port/...

如果要访问帧，协议、主机名和端口必须与您的域相同。

注意:众所周知，Internet Explorer并没有严格遵守这个规则，请参阅这里了解详细信息。

例子

下面是尝试从http://www.example.com/home/index.html访问以下url时会发生的情况

URL                                             RESULT
http://www.example.com/home/other.html       -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80                    -> Success (default port for HTTP)
http://www.example.com:2251                  -> Failure: different port
http://data.example.com/dir/other.html       -> Failure: different hostname
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname

解决方案

尽管同源策略阻止脚本访问具有不同起源的站点的内容，但如果您拥有这两个页面，则可以使用window解决这个问题。postMessage和它的相关message事件在两个页面之间发送消息，如下所示:

In your main page: const frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example'); The second argument to postMessage() can be '*' to indicate no preference about the origin of the destination. A target origin should always be provided when possible, to avoid disclosing the data you send to any other site. In your <iframe> (contained in the main page): window.addEventListener('message', event => { // IMPORTANT: check the origin of the data! if (event.origin === 'https://your-first-site.example') { // The data was sent from your site. // Data sent with postMessage is stored in event.data: console.log(event.data); } else { // The data was NOT sent from your site! // Be careful! Do not use it. This else branch is // here just for clarity, you usually shouldn't need it. return; } });

这个方法可以双向应用，也可以在主页面创建监听器，并从帧接收响应。同样的逻辑也可以在弹出窗口中实现，以及基本上由主页生成的任何新窗口(例如使用window.open())，没有任何区别。

禁用浏览器中的同源策略

关于这个主题已经有了一些很好的答案(我刚刚在谷歌上找到了它们)，所以，对于可能的浏览器，我将链接相对答案。但是，请记住，禁用同源策略只会影响您的浏览器。此外，禁用同源安全设置的浏览器会允许任何网站访问跨源资源，所以这是非常不安全的，如果你不知道自己在做什么(例如开发目的)，就不应该这样做。

谷歌Chrome Mozilla Firefox Safari Opera:与Chrome相同 Microsoft Edge:与Chrome相同 Brave:与Chrome相同 Microsoft Edge(旧的非铬版本):不可能 微软Internet Explorer

实际上，在特定的情况下，有一个变通办法。

如果在同一个域上运行两个进程，但端口不同，那么两个Windows可以不受限制地交互。(即localhost:3000 & localhost:2000)。为了实现这一点，每个窗口都需要将它们的域更改为共享源:

document.domain = 'localhost'

这也适用于您正在使用同一二级域上的不同子域的场景，即您在john.site.example上试图访问peter.site.example或只是site.example

document.domain = 'site.example'

通过显式设置document.domain;浏览器将忽略主机名的差异，Windows可以被视为来自“同源”。现在，在父窗口中，你可以进入iframe:

补充Marco Bonelli的回答:当前框架/iframe之间的最佳交互方式是使用窗口。所有浏览器都支持的postMessage

对我来说，我想实现一个双向握手，这意味着: 父窗口的加载速度比iframe快 iframe应该在准备好后立即与父窗口对话 -父节点已经准备好接收iframe消息并重播

此代码用于在iframe中使用[CSS自定义属性]设置白色标签 代码: iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

父

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

当然，您可以限制起源和文本，这很容易与代码一起工作 我发现下面这个例子很有帮助: [使用postMessage的跨域消息传递]