h5嵌套iframe實時傳參（適用vue）

今天看到一個同事研究給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中了