web_dist/src/views/data-base/data-base-api/DataBase.vue

<script setup lang="ts">
import {
  nextTick,
  onActivated,
  onDeactivated,
  onMounted,
  ref
} from "vue";
import {userInfoStore} from "@/utils/store-public";
import DataBaseDialog from "@/views/data-base/data-base-api/components/DataBaseDialog.vue";

const iframe = ref<HTMLIFrameElement | null>(null)
// @ts-ignore
const src = import.meta.env.VITE_DATA_BASE + '/magic/web/index.html'
// const src = 'http://192.168.56.1:8991'
// const src = 'http://172.16.32.160:9205/magic/web/index.html'
const func = {
  'user': user
}

const dialogRef = ref()

function user() {
  dialogRef.value!.openDialog()
}

const getMessage = (e: { data: string}) => {
  const data : {
    name: string
  } = JSON.parse(e.data)
  // @ts-ignore
  func[data.name] && func[data.name]()
}

onDeactivated(() => {
  window.removeEventListener('message', getMessage)
})

onActivated(() => {
  window.addEventListener('message', getMessage)
})

onMounted(async () => {
  await nextTick()
  iframe.value!.onload = () => {
    const data = {
      token: userInfoStore.value.token,
      name: 'setToken'
    }
    // @ts-ignore
    iframe.value.contentWindow.postMessage(JSON.stringify(data), '*')
  }
})
</script>

<template>
  <DataBaseDialog ref="dialogRef"/>
  <iframe :src="src"
          width="100%"
          height="100%"
          style="border: 0"
          ref="iframe"/>
</template>

<style lang="scss">

</style>