在子页面的iframe中想将参数传递给Vue父组件，可以使用postMessage()方法将数据发送给父窗口。父组件可以通过监听message事件来接收并处理这些数据。
将参数从子页面的iframe传递给Vue父组件：
在子页面的iframe中：
代码语言：javascript复制// 发送消息给父窗口
const data = {
imgUrl: '...',
otherParam: '...'
};
window.parent.postMessage(data, '*');在Vue父组件中：
代码语言：javascript复制mounted() {
// 监听message事件
window.addEventListener('message', this.handleMessage);
},
beforeDestroy() {
// 在组件销毁前移除事件监听器
window.removeEventListener('message', this.handleMessage);
},
methods: {
handleMessage(event) {
// 确保消息来自预期的源
// 如果需要更严格的安全性，请验证event.origin
if (event.source !== window.parent) {
return;
}
// 处理接收到的消息数据
const data = event.data;
const imgUrl = data.imgUrl;
const otherParam = data.otherParam;
// 在Vue父组件中处理数据
// ...
}
}在Vue父组件中，通过在mounted()钩子中监听message事件，可以获取子页面iframe发送的消息。使用handleMessage方法来处理接收到的数据。在这个方法中，可以访问event.data对象，其中包含从子页面传递过来的参数。
在Vue父组件销毁之前，需要使用beforeDestroy()钩子将事件监听器从message事件中移除，以避免潜在的内存泄漏或错误。
在接收到从iframe发送的参数后执行某些特定的逻辑，可以在handleMessage方法中添加相应的判断语句。使用条件语句（如if语句）来检查接收到的参数，并根据不同的条件执行不同的操作。
以下是一个示例，在handleMessage方法中添加判断逻辑：
代码语言：javascript复制handleMessage(event) {
const data = event.data;
// 检查接收到的参数
if (data && data.imgUrl && data.otherParam) {
// 参数完整，执行特定的操作
console.log('打印子页面经纬度 iframe:', data);
// 进一步处理参数
// ...
} else {
// 参数不完整，忽略或执行其他操作
console.log('接收到的参数不完整');
}
}这里使用条件语句检查接收到的参数data是否存在，并且是否具有imgUrl和otherParam属性。如果参数完整，可以打印参数的值并可以执行特定的操作。否则，如果参数不完整，就忽略它或执行其他适当的操作。
iframe接收vue界面传的值
在iframe中，使用window.addEventListener监听message事件，然后在事件处理程序中获取传递的数据：
代码语言：javascript复制<!-- iframe.html -->
<script>
// 监听来自父页面的消息
window.addEventListener('message', function(event) {
const data = event.data;
// 在这里处理接收到的消息
console.log('Received message from parent:', data);
});
</script>父页面使用postMessage方法向iframe发送消息。postMessage方法接收两个参数：要发送的数据和目标窗口的origin（使用通配符'*'表示可以从任何来源接收消息）。
iframe中使用window.addEventListener监听message事件，并在事件处理程序中获取传递的数据
这里需要注意一下，使用'*'作为目标窗口的origin存在安全风险。建议在实际使用中，指定确切的origin，以防止来自不受信任的来源的消息。
