iframe 跨域问题答案

【问题标题】：Iframe cross domain issueiframe 跨域问题
【发布时间】：2012-12-11 06:58:25
【问题描述】：

我想每隔几秒钟从 iframe 向父页面传递一条消息，例如：

Iframe Domain = www.abc.com
Parent Domain = www.xyz.com

检查：

有人可以帮我吗？

【问题讨论】：

你的问题是什么？ postMessage 应该可以跨域工作。
如果服务允许 *（或 xyz.com），@Amadan postMessage 将跨域工作。还是我弄错了？
你错了。 postMessage 的全部意义在于允许陌生人之间的交流。您不能强制其他框架执行它尚未拥有的任何代码，只需向它发送数据 - 他们如何处理这些数据，以及他们如何验证它，都在他们身上。这与链接问题中引用的 document.getElementById('myframe').contentWindow.document 之类的内容形成对比，后者试图主动窥探另一个框架的事务。阅读更多关于postMessageat MDN的信息。

标签： javascript jquery iframe cross-domain

【解决方案1】：

我最近刚刚帮助了另一个有类似问题的人，在 IFrame 之间传递消息。（见Issues with Cross Document Messaging between IFrame & Parent）。

使用我在上述主题中从 samikim 借用的代码的修改版本，我集成了一个计时器。这对您来说应该是一个很好的起点。正如 Amadan 在上面的 cmets 中描述的那样，这些父 html 页面和子 html 页面将跨域工作。我刚刚测试并确认了这一点，将 parent.html 放在一个指向 child.html 的域上在一个完全独立的不受信任的域上。

parent.html

<html>
<head>
    <script type="text/javascript">
        function parentInitialize() {
            var count = 0;
            window.addEventListener('message', function (e) {
                // Check message origin etc...
                if (e.data.type === 'iFrameRequest') {
                    var obj = {
                        type: 'parentResponse',
                        responseData: 'Response #' + count++
                    };
                    e.source.postMessage(obj, '*');
                }
                // ...
            })
		}
    </script>
</head>
<body style="background-color: rgb(72, 222, 218);" onload="javascript: parentInitialize();">
    <iframe src="child.html" style="width: 500px; height:350px;"></iframe>
</body>
</html>

child.html

<html>
<head>
    <script type="text/javascript">
        function childInitialize() {
            // ...

            try {
                if (window.self === window.top) {
                    // We're not inside an IFrame, don't do anything...
                    return;
                }
            } catch (e) {
                // Browsers can block access to window.top due to same origin policy.
                // See https://stackoverflow.com/a/326076
                // If this happens, we are inside an IFrame...
            }

            function messageHandler(e) {
                if (e.data && (e.data.type === 'parentResponse')) {
                    // Do some stuff with the sent data
                    var obj = document.getElementById("status");
                    obj.value = e.data.responseData;
                }
            }

            window.addEventListener('message', messageHandler, false);

            setInterval(function () {
                window.parent.postMessage({ type: 'iFrameRequest' }, '*');
            }, 1000);
            // ...
        }
    </script>
</head>
<body style="background-color: rgb(0, 148, 255);" onload="javascript: childInitialize();">
    <textarea type="text" style="width:400px; height:250px;" id="status" />
</body>
</html>

祝你好运！

【讨论】：