Iframe 如何与父站点之间进行通信？

当iframe页面需要和其父站点进行通信时，主要依靖于JavaScript中的几种机制来实现。下面我将详细介绍几种常见的通信方式及其应用场景：

1. 使用postMessage方法

postMessage是HTML5中引入的一种安全的跨源通信方法。它允许来自不同源的页面进行数据交换，避免了直接通过DOM进行交互可能引起的安全问题。

父页面向iframe发送消息的例子：

javascript
// 在父页面中
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello iframe!', 'http://iframe-domain.com');

iframe接收消息的例子：

javascript
// 在iframe中
window.addEventListener('message', function(event) {
    if (event.origin !== 'http://parent-domain.com') {
        // 可以通过检查event.origin来验证发消息方的源
        return;
    }
    console.log('Received message from parent:', event.data);
});

2. 直接操作DOM元素

如果iframe页面与父页面同源，也就是说它们的协议、域名和端口都相同，那么它们之间可以直接通过JavaScript操作对方的DOM。

父页面访问iframe DOM的例子：

javascript
// 在父页面中
var iframeDocument = document.getElementById('myIframe').contentDocument;
var elementInIframe = iframeDocument.getElementById('someElement');
elementInIframe.innerHTML = 'Hello from parent page!';

iframe访问父页面DOM的例子：

javascript
// 在iframe中
var parentDocument = window.parent.document;
var elementInParent = parentDocument.getElementById('someElementInParent');
elementInParent.innerHTML = 'Hello from iframe!';

3. 使用JavaScript回调函数

在某些情况下，父页面可以将函数作为全局变量或者作为iframe窗口的属性传入，这样iframe就可以直接调用这些函数来与父页面通信。

父页面提供一个可被iframe调用的函数的例子：

javascript
// 在父页面中
function parentFunction(message) {
    console.log('Message from iframe:', message);
}

iframe调用父页面函数的例子：

javascript
// 在iframe中
window.parent.parentFunction('Hi, parent!');

注意事项和安全考虑：

1. 跨域通信时务必使用postMessage，并且验证消息来源event.origin确保安全。
2. 通过DOM直接操作时要注意跨域问题，只有同源时才能执行。
3. 在使用全局函数进行通信时，要注意可能导致的命名冲突和函数作用域的问题。

通过上述机制，iframe页面和父站点可以有效地进行通信，同时保持安全性和灵活性。在实现这些通信机制时，我们必须考虑到安全性问题，确保不会暴露敏感信息或者允许潜在的恶意行为。

对于不同的域，无法直接调用方法或访问 iframe 的内容文档。

您必须使用跨文档消息传递。

父级 -> iframe

例如在顶部窗口中：

shell
myIframe.contentWindow.postMessage('hello', '*');

并在 iframe 中：

shell
window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

iframe -> 父级

例如在顶部窗口中：

shell
window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

并在 iframe 中：

shell
window.top.postMessage('hello', '*')