2022-10-10 iframe 子父级传参
2022-10-09 本文已影响0人
Aurora_80ac
文章来源于：https://blog.csdn.net/Crazy_GirlLL/article/details/124300835
1，父页面给子页面（iframe）传参
父级
子页面（iframe）
代码：
// 父页面向子页面传递数据
父级：
<iframe id="ifm" ref="ifm" src="xxx" frameborder="no" border="0" class="flexItem"></iframe>
mounted () {
// iframe加载完毕后再发送消息，否则子页面接收不到message,或者说通过事件触发的，就不用 this.$refs.ifm.onload
this.$refs.ifm.onload = () => {
// iframe加载完立即发送一条消息
this.$refs.ifm.contentWindow.postMessage({
'token': this.token
}, '*')
}
}
子级：
mounted () {
window.addEventListener("message", this.handleIncomingMessage, false)
},
2，子页面（iframe）给父页面传参
代码：
子级
window.parent.postMessage({msg:'feedback_form_draft'}, '*')
父级
mounted () {
// 接受iframe的参数
window.addEventListener('message', this.handleIncomingMessage, false)
}
