h5 iframe嵌套页面_h5嵌套iframe实时传参（适用vue）

今天看到一个同事研究给iframe传参，由于好奇，我自己也写了个demo，说起来其实也挺简单的，但是在此之前没有用过，便想记录一下

其中主要用到的是postMessage

在页面中引入一个iframe标签

在父页面添加监听iframe传过来的数据，并且向iframe传参

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中向页面传递信息

{{params}}

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

}

})

}

}

这样就可以实现将页面中输入的内容同步到iframe中了