vue - vue和iframe之间通信传值

前言

    在vue中使用iframe标签，实现vue和iframe中通信

vue与iframe通信

// vue
<template lang="pug">
  .map-content
    iframe#mapIframe(:src="mapIframeUrl" ref="mapFrame" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes")
</template>
<script>
export default {
    
    
  methods: {
    
    
    getGeometry () {
    
    
      let params = 'xxx'
      let temp = this.$refs.mapFrame.contentWindow.getGeometry(params)
      temp.then(res => {
    
    
        resolve(res)
      })
    }
  }
}
</script>

// iframe
 function getGeometry (params) {
    
    
  return new Promise(function (resolve, reject) {
    
    
    ...
    resolve(result)
  });
}

iframe与vue通信

// iframe
function postMessage (val) {
    
    
  window.parent.postMessage(val, '*');
}

// vue
<script>
export default {
    
    
  created () {
    
    
    this.$nextTick(() => {
    
    
      window.addEventListener('message', (messageEvent) => {
    
    
        let data = messageEvent.data
        console.log(data)
      })
    })
  }
}
</script>