最近的项目开发中用到了Vue组件中嵌套iframe，相应的碰到了组件和HTML的通信问题，场景如下：demo.vue中嵌入 test.html
由于一般的iframe嵌套是用于HTML文件的，在vue中我们需要在vue文件注册一个全局的方法，在iframe中某个事件触发时，可以回传到vue组件
demo.vue主要代码：
<template>
<iframe ref="iframe" src='test.html'> </iframe>
</template>
<script>
export default {
data() {
return {
spanClick: 'handleSpanClick' //html中需要响应的事件
}
},
created() {
let _this = this
window[this.spanClick] = (params) => {
_this.doSomeThing(params)
}
},
methods: {
doSomeThing(params){
//todo
}
}
}
</script>
test.html主要代码;
<div>
<span onclick="handleTest(this)">test</span>
</div>
<script>
function handleTest(event) {
window.parent['handleSpanClick'](event.innerText)
}
<script>
有的时候，我们需要从vue组件中向html传参，一种比较简单的方法是在iframe的src中做拼接，举个栗子，我们需要在vue中向HTML传入一个json
data = {
id: 1,
name: 'will'
}
这时候的src = ‘test.html?’ + encodeURIComponent(JSON.stringify(data)) //使用encodeURIComponent 是为了在传参的时候对参数加密一下防止乱码
相应的在test.html中需要解码：
JSON.parse(decodeURIComponent(window.location.search.slice(1)))