vue嵌套iframe并进⾏传值vue中引⼊iframe
<template>
<div>
<iframe src="链接" ref="iframe"></iframe>
</div>
</template>
⽗级vue中:
<script>
export default {
data: {
iframeVue: null
},
mounted(){
window.addEventListener('message', this.handleMessage) // 监听iframe的事件
this.iframeVue= this.$tWindow
},
methods: {
handleMessage(event) {
let data = event.data
},
sendMessage() {
// 向iframe传参
this.iframeWin.postMessage({
iframeClick: 'getParams', // iframe对应⽤来判断触发的是什么事件
params: { // 传过去的值
key: this.params,
}
}, '*')
}
}
}
iframe中:
<script>
iframe嵌套页面加载慢 export default {
data: {
iframeVal: null , // 为了接受vue传过来的值
},
mounted() {
// 接受vue传过来的值
window.addEventListener('message', (event) => {
console.log(event)
let data = event.data;
switch (data.iframeClick) {
case 'getParams':
this.iframeVal= data.params.key; // 这样就拿到了vue传过来的params
}
})
}
}
</script>```
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论