js iframe数据交互

// 父页面向iframe传递数据

// 假设iframe的id为"myIframe"
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;

// 定义要传递的数据
var data = { message: 'Hello from parent page!' };

// 使用postMessage方法向iframe发送消息
iframeWindow.postMessage(JSON.stringify(data), '*'); // '*'表示可以发送到任意源，实际使用时应指定具体源以确保安全

// 在iframe页面中接收数据

// 监听message事件
window.addEventListener('message', function(event) {
    // 检查消息来源是否可信（这里简单示例不做具体检查）

    // 解析接收到的数据
    var receivedData = JSON.parse(event.data);
    console.log(receivedData.message); // 输出: Hello from parent page!
});

// iframe向父页面传递数据

// 在iframe页面中定义要传递的数据
var dataToParent = { message: 'Hello from iframe!' };

// 使用postMessage方法向父页面发送消息
window.parent.postMessage(JSON.stringify(dataToParent), '*'); // '*'表示可以发送到任意源，实际使用时应指定具体源以确保安全

// 在父页面中接收数据

// 监听message事件
window.addEventListener('message', function(event) {
    // 检查消息来源是否可信（这里简单示例不做具体检查）

    // 解析接收到的数据
    var receivedData = JSON.parse(event.data);
    console.log(receivedData.message); // 输出: Hello from iframe!
});

解释说明：

1. 父页面向iframe传递数据：通过postMessage方法，父页面可以向iframe发送消息。消息内容需要序列化为字符串（例如使用JSON.stringify），并且需要指定目标窗口和消息的目标源。
2. 在iframe页面中接收数据：iframe页面监听message事件，当接收到消息时，可以通过event.data获取消息内容，并进行反序列化（例如使用JSON.parse）。
3. iframe向父页面传递数据：同样使用postMessage方法，iframe可以向父页面发送消息。父页面也需要监听message事件来接收并处理这些消息。

请注意，在实际应用中，为了确保安全性，应该严格检查消息的来源（即event.origin），而不是简单地使用'*'。