今天看到一个同事研究给iframe传参，由于好奇，我自己也写了个demo，说起来其实也挺简单的，但是在此之前没有用过，便想记录一下
其中主要用到的是postMessage
在页面中引入一个iframe标签
<template>
<div>
<iframe src="http://10.36.37.40:8081" ref="iframe"></iframe>
<input v-module=‘inputVal‘>
<button @click=‘sendMessage‘></button>
</div>
</template>
在父页面添加监听iframe传过来的数据，并且向iframe传参
<script>
export default {
data: {
iframeWin: null
},
mounted(){
window.addEventListener(‘message‘, this.handleMessage) // 监听iframe的事件
this.iframeWin = this.$refs.iframe.contentWindow
},
methods: {
handleMessage(event) {
let data=event.data
},
sendMessage() {
// 给iframe传参
this.iframeWin.postMessage({
cmd: ‘getParams‘, // cmd 用来判断触发的是什么事件
params: {
key: this.params,
}
}, ‘*‘)
}
}
}
在iframe中向页面传递信息
<template>
<div>{{params}}</div>
</template>
<script>
export default {
data: {
params: null
},
mounted() {
// 接受父页面发来的信息
window.addEventListener(‘message‘, (event) => {
console.log(event)
let data = event.data
console.log(data)
switch (data.cmd) {
case ‘getParams‘:
console.log(‘public data‘, data)
this.params = data.params.key
}
})
}
}
</script>
这样就可以实现将页面中输入的内容同步到iframe中了
原文：https://www.cnblogs.com/wing-sky/p/11211605.html