<template>
<div class="iframe">
<iframe
id="myIframe"
:src="iframeUrl"
width="100%"
height="100%"
frameborder="0"
></iframe>
{{ iframeUrl }}
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { encrypt } from '_utils/tools'
export default {
name: 'Iframe',
components: {},
data() {
return {
iframe: null
}
},
computed: {
...mapGetters(['userInfo']),
iframeUrl() {
return (
this.$route.meta.iframeUrl + '?code=' + encrypt(this.userInfo.username)
)
}
},
watch: {
iframeUrl: {
handler(newVal, oldVal) {
this.sendMessageToIframe()
},
deep: true
}
},
mounted() {
this.iframe = document.getElementById('myIframe')
this.iframe.onload = ()=>{
this.sendMessageToIframe()
}
},
methods: {
sendMessageToIframe() {
var message = { system: '自定义系统唯一标识' }
this.iframe &&
this.iframe['contentWindow'] &&
this.iframe.contentWindow.postMessage(message, '*')
}
}
}
</script>
<style lang="less" scoped>
.iframe {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
通过iframe继承系统,对接每个菜单
最新推荐文章于 2024-07-24 10:40:52 发布