vue如何内嵌网页

参考链接:https://m.php.cn/faq/536004.html

场景:在A项目中需要打开B项目的页面 ，此时我们有三种方法；请参考https://m.php.cn/faq/536004.html

方案一:iframe打开

A项目打开

通过postMessage方法通信

<iframe
        :src="clientPath"
        id="memberIframePage"
        width="100%"
        height="1000px"
        frameborder="0"
        scrolling="yes"
        :onLoad="loaded"
      ></iframe>
 const clientPath = ref<string>(
    `${import.meta.env.VITE_CLIENT_HOST}/hpm/#/achievement?hpmEventId=${
      route.query.activityId
    }&userId=${route.query.userId}&processNodeType=${route.query.processNodeType}&isDone=1`,
  )
 const loaded = () => {
    loading.value = true
    setTimeout(() => {
      sendMsg()
    }, 3000)
  }
   const sendMsg = () => {
    const myIframe = document.getElementById('memberIframePage') as any
    myIframe.contentWindow.postMessage(
      {
        type: 'innerCode',
        token: useStore.token,
      },
      '*',
    )
    loading.value = false
  }

B项目接收参数

onMounted(async () => {
    if (window.self === window.top) {
      await getContainerDetail()
    }
    window.addEventListener('message', getParentMessage)
  })
  onUnmounted(() => {
    window.removeEventListener('message', getParentMessage)
    if (settingsStore.iframeHideHeader) {
      settingsStore.changeIframeConfig({
        showNavBack: true,
        hideHeader: false,
      })
    }
  })
  //获取到传递的参数如token做其他事情
    const getParentMessage = async (e) => {
    if (e.data.type == 'innerCode') {
      settingsStore.changeIframeConfig({
        showNavBack: false,
        hideHeader: true,
      })
      getContainerDetail(e.data.token)
    }
  }

方案二:object

A项目打开

<template>
  <object :data="outPath" width="100%" height="800" type="text/html"> </object>
</template>

<script lang="ts" setup name="WuzisynergyWorkOrder">
  import { useUserStore } from '@/@engine/layouts/store/user'
  import { pinia } from '@/store/plugins'
  const userStore = useUserStore(pinia)
  const token = `Bearer ${userStore.token}`
  const outPath = ref('')
  const domain = import.meta.env.VITE_FSC_DOMAIN
  outPath.value = `
    ${domain}#/to?platform=fcm&token=${token}&target=customer-workorder
    `
</script>

<style scoped lang="scss"></style>

B项目的页面接收通过地址栏接收参数

**注意:**涉及到跨系统 两个系统之之间的token并不相通，因此我们在A项目中加载B项目的页面时，则要将A项目的token传给B项目，获取对应用户的相关信息