前言
在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>