iframe 子向父通信
时间: 2023-11-06 19:08:07 浏览: 51
可以使用 window.parent.postMessage() 方法实现 iframe 子页面向父页面的通信。在子页面中,可以通过以下方式发送消息:
```
window.parent.postMessage('message', 'https://parent.com');
```
其中,第一个参数是要发送的消息,第二个参数是父页面的域名,用于限制接收消息的页面。
在父页面中,可以通过监听 message 事件来接收子页面发送的消息:
```
window.addEventListener('message', function(event) {
if (event.origin === 'https://child.com') {
console.log('Received message: ' + event.data);
}
});
```
其中,event.data 表示接收到的消息内容,event.origin 表示消息来源的域名。
相关问题
uniapp里面使用iframe子页面向父页面通信
在uniapp中使用iframe子页面向父页面通信,需要使用官方提供的renderjs,并且需要注意以下几点:
1. 在父页面中引入renderjs,并在mounted生命周期中初始化renderjs。
2. 在子页面中使用postMessage方法向父页面发送消息,并在父页面中监听message事件来接收消息。
下面是一个示例代码:
在父页面中:
```
<template>
<view>
<iframe src="子页面地址" @load="onLoad"></iframe>
</view>
</template>
<script>
import renderjs from '@/common/renderjs/renderjs.js'
export default {
mounted() {
renderjs.init()
window.addEventListener('message', this.onMessage)
},
methods: {
onMessage(event) {
console.log('收到子页面消息:', event.data)
},
onLoad() {
const iframe = this.$refs.iframe
iframe.contentWindow.postMessage('父页面向子页面发送消息', '*')
}
}
}
</script>
```
在子页面中:
```
<template>
<view>
子页面内容
</view>
</template>
<script>
export default {
mounted() {
window.addEventListener('message', this.onMessage)
},
methods: {
onMessage(event) {
console.log('收到父页面消息:', event.data)
parent.postMessage('子页面向父页面发送消息', '*')
}
}
}
</script>
```
vue iframe 父传子跨域通信
在Vue中,父组件和子组件之间的通信可以通过props和$emit来实现。但是,由于浏览器的同源策略,如果父组件和子组件不在同一个域名下,就无法直接进行通信。这时候可以使用iframe来实现跨域通信。
以下是在Vue中使用iframe实现父组件向子组件传值的方法:
1.在父组件中定义一个iframe,并设置src属性为子组件的地址:
```html
<template>
<div>
<iframe :src="childUrl" ref="childFrame"></iframe>
</div>
</template>
```
2.在父组件中定义一个方法,用于向子组件发送消息:
```javascript
methods: {
sendMessageToChild(msg) {
const childFrame = this.$refs.childFrame;
childFrame.contentWindow.postMessage(msg, this.childUrl);
}
}
```
3.在子组件中监听message事件,用于接收父组件发送的消息:
```javascript
mounted() {
window.addEventListener('message', this.receiveMessageFromParent, false);
},
methods: {
receiveMessageFromParent(event) {
if (event.origin !== this.parentUrl) {
return;
}
const msg = event.data;
// 处理接收到的消息
}
}
```
其中,childUrl和parentUrl分别为子组件和父组件的地址。